Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-csv-downloader

Package Overview
Dependencies
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-csv-downloader

React csv downloader

  • 3.1.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
20K
decreased by-18.73%
Maintainers
1
Weekly downloads
 
Created
Source

React CSV Downloader

Renovate badge CircleCI Status Dependency Status devDependency Status

A simple react component to allow download CSV file from js object

Installation

npm install --save react-csv-downloader

Usage

Use with children component

import CsvDownloader from 'react-csv-downloader';
<CsvDownloader>
  <button>Download</button>
</CsvDownloader>;

Use without children component

<CsvDownloader text="Download" />

Datas

pass the downloaded datas as a component prop

const datas = [
  {
    cell1: 'row 1 - cell 1',
    cell2: 'row 1 - cell 2',
  },
  {
    cell1: 'row 2 - cell 1',
    cell2: 'row 2 - cell 2',
  },
];

<CsvDownloader datas={datas} />;

Datas (on demand with async function resolver)

pass a function to compute datas to be downloaded

const asyncFnComputeDate = () => {
  // do whatever you need async
  return Promise.resolve([
    {
      cell1: 'row 1 - cell 1',
      cell2: 'row 1 - cell 2',
    },
    {
      cell1: 'row 2 - cell 1',
      cell2: 'row 2 - cell 2',
    },
  ]);
};

<CsvDownloader datas={asyncFnComputeDate} />;

Column

pass the columns definition as a component prop to change the cell display name. If column isn't passed the cell display name is automatically defined with datas keys

const columns = [
  {
    id: 'cell1',
    displayName: 'Cell 1',
  },
  {
    id: 'cell2',
    displayName: 'Cell 2',
  },
];

<CsvDownloader columns={columns} />;

You can also use the columns definition to set the columns display order

Props

NameTypeDefaultRequiredDescription
columnsarray of objectnullfalseColumns definition
datasarray of object/Func/PromisenulltrueDownloaded datas or a Promise or a function that can resolve data on demand (async)
filenamestringnulltrueYou can pass the filename without extension. The extension is automatically added
extensionstring'.csv'falseYou can pass the file extension, note that it will affect filename
separatorstring','falseColumns separator
noHeaderbooleanfalsefalseIf true the header isn't added to the csv file
prefixstring or booleanfalsefalseFilename prefix. If true prefix becomes a timestamp
suffixstring or booleanfalsefalseFilename suffix/postfix. If true suffix becomes a timestamp
textstringnullfalseDownload button text. Used if no children component.
wrapColumnCharstring''falseCharacter to wrap every data and header value with.
bombooleantruefalseActivate or deactivate bom mode
newLineAtEndbooleanfalsefalseInsert new line at end of file.
disabledbooleanfalsefalseIf true the download process is blocked.
metabooleanfalsefalseIf true the downloaded file will contain meta instruction sep to help microsoft excel and open office to recognize the sepator character.
handleErrorfunctionundefinedfalseFunction to be invoked on error data
handleEmptyfunctionundefinedfalseFunction to be invoked on empty result data
titlestringundefinedfalseYou can pass a string to be added as a title at the top of the sheet

All other props are passed to button or wrapping component.

Full example

pass the downloaded datas as a component prop

render() {
  const columns = [{
    id: 'first',
    displayName: 'First column'
  }, {
    id: 'second',
    displayName: 'Second column'
  }];

  const datas = [{
    first: 'foo',
    second: 'bar'
  }, {
    first: 'foobar',
    second: 'foobar'
  }];

  return (
    <div>
      <CsvDownloader
        filename="myfile"
        extension=".csv"
        separator=";"
        wrapColumnChar="'"
        columns={columns}
        datas={datas}
        text="DOWNLOAD" />
    </div>
  );
}

// content of myfile.csv
// 'First column';'Second column'
// 'foo';'bar'
// 'foobar';'foobar'

Get CSV contents

If you just need to get CSV contents, use import { toCsv } from 'react-csv-downloader'; to import toCsv function and use it directly.

License

MIT License

Keywords

FAQs

Package last updated on 17 Sep 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc