React CSV Generator:
Generate CSV file from your data (and analyze them!)

Damian Pawłowski Head of Frontend

Every data-related application must store and share data in different ways. In almost every dashboard you can see tables and charts filled with various information. There is even a special science to analyze data called Data Science. Data science is the study of analyzing raw data to draw conclusions about business, trends, evaluations, etc. Why is it so important? Because it can contribute to making millions of dollars. For example, Amazon uses the CFE technique to analyze the purchasing pattern of its users and therefore makes 35 percent of its annual sales.

But not only big companies analyze data. Often, investors using various investment applications need to analyze the data to better understand the market. The better you understand the company, the better you’ll be able to make wise investment decisions and stay on course.

If you manage an application where users can analyze data, you should allow them to make the analysis easier. Apps with user-friendly interfaces are proven to attract and retain more active users. A common case is allowing users to download and analyze data on their side. One approach is to allow users to download data via CSV files, this is a very popular solution in investor applications. Generating data on the backend side is sometimes time-consuming. Often, the data is prepared and displayed to the end user. The only thing missing is the download button. We can take advantage of the fact that the data is already prepared and generate a CSV file on the frontend side.

Generate a CSV file on the frontend side

It doesn’t matter if you can provide data from an API or an internal server, you can easily generate it from the React component. We have prepared the npm package which handles all of the cases. You have 2 options to pass the data to the component:

  • pass the endpoint URL and the component will make a call, get the data, and generate CSV. It also supports pagination so the component can fetch a big chunk of data at one Promise.all and prepare the CSV file at once
  • pass a data array, and the component will prepare a CSV file from it (for example, during server-side rendering)

In the first case, the solution is trivial – just render the React component and pass the URL of the endpoint. In the second case, you have to pass an array of data to the component. If you have data on the frontend side, it’s very easy, otherwise, you probably would like to do this during server-side rendering. Injecting React into the server code during SSR is possible in a variety of environments, such as:

How to implement it?

  1. Install it

    npm install @exlabs/react-csv-generator

    or

    yarn add @exlabs/react-csv-generator

  2. Render it
    import React from 'react'; 
    import CsvGenerator from '@exlabs/react-csv-generator';

    const data = [
     { id: 1, name: 'first' },
     { id: 2, name: 'second' }
    ];

    const MyComponent = () => {
     return (
      <div>
       <h1>Hello!</h1>
       <CsvGenerator fileName="my-name" items={data}> Download!
       </CsvGenerator>
      </div>
     );
    };

    export default MyComponent;

Examples

  • Data from the endpoint:
    import React from 'react'; 
    import CsvGenerator from '@exlabs/react-csv-generator';

    const MyComponent = () => {
     return (
      <div>
       <h1>Hello!</h1>
       <CsvGenerator fileName="my-name" baseEndpoint="https://api.punkapi.com/v2/beers" > Download!
       </CsvGenerator>
      </div>
     );
    };

    export default MyComponent;
  • Data from the array:
    import React from 'react'; 
    import CsvGenerator from '@exlabs/react-csv-generator';

    const data = [
     { id: 1, name: 'first' },
     { id: 2, name: 'second' }
    ];

    const MyComponent = () => {
     return (
      <div>
       <h1>Hello!</h1>
       <CsvGenerator fileName="my-name" items={data}> Download!
       </CsvGenerator>
      </div>
     );
    };

    export default MyComponent;

More examples at Github.