Wondering what’s next for npm?Check out our public roadmap! »

    react-csv-downloader
    TypeScript icon, indicating that this package has built-in type declarations

    2.5.0 • Public • Published

    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}/>

    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

    Name Type Default Required Description
    columns array of object null false Columns definition
    datas array of object null true Downloaded datas
    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.

    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, import react-csv-downloader/dist/lib/csv function and use it directly.

    License

    MIT License

    Install

    npm i react-csv-downloader

    DownloadsWeekly Downloads

    8,437

    Version

    2.5.0

    License

    MIT

    Unpacked Size

    82.5 kB

    Total Files

    26

    Last publish

    Collaborators

    • avatar