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

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:

• For Rails, you can do SSR by using the react_on_rails package
• For Node.js, you can use Next.js which handles it out of the box
• For Java with Spring, you can use GraalVM

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;