# React CSV Downloader [![Renovate badge][renovate-badge]][renovate] [![CircleCI Status][build-badge]][build] [![Dependency Status][deps-badge]][deps] [![devDependency Status][dev-deps-badge]][dev-deps] A simple react component to allow download CSV file from js object ## Installation ```sh npm install --save react-csv-downloader ``` ## Usage Use with children component ```jsx import CsvDownloader from 'react-csv-downloader'; ; ``` Use without children component ```jsx ``` ### Datas pass the downloaded datas as a component prop ```jsx const datas = [ { cell1: 'row 1 - cell 1', cell2: 'row 1 - cell 2', }, { cell1: 'row 2 - cell 1', cell2: 'row 2 - cell 2', }, ]; ; ``` ### Datas (on demand with async function resolver) pass a function to compute datas to be downloaded ```jsx 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', }, ]); }; ; ``` ### 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 ```jsx const columns = [ { id: 'cell1', displayName: 'Cell 1', }, { id: 'cell2', displayName: 'Cell 2', }, ]; ; ``` You can also use the columns definition to set the columns display order ## Props | Name | Type | Default | Required | Description | | -------------- | ---------------------------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | columns | array of object | null | false | Columns definition | | datas | array of object/Func/Promise | null | true | Downloaded datas or a Promise or a function that can resolve data on demand (async) | | filename | string | null | true | You can pass the filename without extension. The extension is automatically added | | extension | string | '.csv' | false | You can pass the file extension, note that it will affect filename | | separator | string | ',' | false | Columns separator | | noHeader | boolean | false | false | If `true` the header isn't added to the csv file | | prefix | string or boolean | false | false | Filename prefix. If `true` prefix becomes a timestamp | | suffix | string or boolean | false | false | Filename suffix/postfix. If `true` suffix becomes a timestamp | | text | string | null | false | Download button text. Used if no children component. | | wrapColumnChar | string | '' | false | Character to wrap every data and header value with. | | bom | boolean | true | false | Activate or deactivate bom mode | | newLineAtEnd | boolean | false | false | Insert new line at end of file. | | disabled | boolean | false | false | If `true` the download process is blocked. | | meta | boolean | false | false | If `true` the downloaded file will contain meta instruction sep to help microsoft excel and open office to recognize the sepator character. | | handleError | function | undefined | false | Function to be invoked on error data | | handleEmpty | function | undefined | false | Function to be invoked on empty result data | title | string | undefined | false | You 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 ```jsx render() { const columns = [{ id: 'first', displayName: 'First column' }, { id: 'second', displayName: 'Second column' }]; const datas = [{ first: 'foo', second: 'bar' }, { first: 'foobar', second: 'foobar' }]; return (

); } // 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](http://opensource.org/licenses/MIT) [renovate-badge]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg [renovate]: https://renovatebot.com/ [build-badge]: https://circleci.com/gh/dolezel/react-csv-downloader.svg?style=svg [build]: https://circleci.com/gh/dolezel/workflows/react-csv-downloader [deps-badge]: https://david-dm.org/dolezel/react-csv-downloader.svg [deps]: https://david-dm.org/dolezel/react-csv-downloader [dev-deps-badge]: https://david-dm.org/dolezel/react-csv-downloader/dev-status.svg [dev-deps]: https://david-dm.org/dolezel/react-csv-downloader#info=devDependencies

パッケージ	ダウンロード数	Stars	サイズ	Issues	公開日時	ライセンス

react-csv-downloader	33,054	119	124 kB	3	4ヶ月前	MIT