npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@definiv/react-csv

v1.1.1

Published

Build CSV files on the fly basing on Array/literal object of data

Downloads

4

Readme

Build Status Coverage Status

Build Status Coverage Status

Overview :

Generate CSV document according to given data.

This data can be array of arrays , or array of literal objects or string which is the CSV content.

Example :

import {CSVLink, CSVDownload} from 'react-csv';


const csvData =[
  ['firstname', 'lastname', 'email'] ,
  ['Ahmed', 'Tomi' , '[email protected]'] ,
  ['Raed', 'Labes' , '[email protected]'] ,
  ['Yezzi','Min l3b', '[email protected]']
];
<CSVLink data={csvData} >Download me</CSVLink>
// or
<CSVDownload data={csvData} target="_blank" />

And many examples are here 👈🏼

Install

npm install react-csv --save;

or , for non-node developers , you can use CDN directly :

<script src="https://cdn.rawgit.com/abdennour/react-csv/6424b500/cdn/react-csv-latest.min.js" type="text/javascript"></script>

Components:

This package includes actually two components: CSVLink and CSVDownload.

0. Common Props:

The two components accepts the following Props:

- data Props:

a required property that represents the CSV data. This data can be array of arrays, array of literal objects or string.

.i.e (array of arrays)

//array of arrays : each item is rendered as csv line
data = [
  ['firstname', 'lastname', 'email'] ,
  ['Ahmed', 'Tomi' , '[email protected]'] ,
  ['Raed', 'Labes' , '[email protected]'] ,
  ['Yezzi','Min l3b', '[email protected]']
];

.i.e (array of literal objects)

//array of literal objects : each item is rendered as csv line however the order of fields will be defined by headers props .If headers props is not defined , the component will generate headers from all data items.
data = [
  {firstname: 'Ahmed', lastname: 'Tomi' , email: '[email protected]'},
  {firstname:'Raed', lastname:'Labes' , email:'[email protected]'} ,
  {firstname:'Yezzi', lastname:'Min l3b', email:'[email protected]'}
];

.i.e (string)

//if the data is string , this means the csv content is already generated by developer/3rd party package.

data =`firstname,lastname
Ahmed,Tomi
Raed,Labes
Yezzi,Min l3b
`;
// or using 3rd party package
import json2csv from 'json2csv';
data = json2csv(arrayOfLiteralObjects);      

- headers Props:

Specifying headers helps to define an order of CSV fields , so , the csv content will be generated accordingly.

Notes :

  • The meaning of headers with data of type Array is to order fields AND prepend those headers at the top of CSV content.
  • The meaning of headers with data of type String data is only prepending those headers as the first line of CSV content.

- separator Props:

Following a request to add this feature , from 1.0.1 release, react-csv supports separator props which is equals by default a comma , .

import {CSVLink} from 'react-csv';

<CSVLink data={array} separator={";"}>
    Download me
</CSVLink>
/*
  This will generate CSV with ";" as delimiter (separator)

 */

1. CSVLink Component:

It renders a hyperlink , and clicking on it will trigger the download action of the CSV document.

It does not accept only data and headers props , but also , it rendered all props of HTMLAnchor tag. (className, target,....)

- filename Props:

filename is another props restricted to CSVLink. It specifies the filename of the downloaded CSV .

example

import {CSVLink} from 'react-csv';

<CSVLink data={data}
  filename={"my-file.csv"}
  className="btn btn-primary"
  target="_blank">
    Download me
</CSVLink>

2. CSVDownload Component:

It triggers downloading ONLY on mounting the component. so , be careful to render this component whenever it is needed.

It does not accept only data and headers props , but also , it takes advantage of all arguments of window.open function known that its signature is :

window.open(ARG0, target, specs, replace )

Thus, target, specs and replace Props are available .

example

import {CSVDownload} from 'react-csv';

<CSVDownload data={data} target="_blank" />

For non-node developers, they have to use CDN version :

 <script src="https://cdn.rawgit.com/abdennour/react-csv/6424b500/cdn/react-csv-latest.min.js" type="text/javascript"></script>

 <script type="text/babel">
   const {CSVDownload, CSVLink} = ReactCSV;// or window.ReactCSV

   const element= (<CSVDownload data={data} target="_blank" />);

   ReactDOM.render(element, document.querySelector('#app'));
 </script>

Contribution :

  • Unit-tests must cover at least 90 % of code .

  • Write documentation of the new class, function , method , attribute ..so on.. following JSDoc syntax.

  • Add an example for the new feature to sample-site.

  • npm start runs the sample-site

  • npm docgen generates documentation in HTML output.

  • npm cdn generate a bundle to be used as CDN

Donation

If this project help you reduce time to develop, you can give me a cup of coffee 🍵 :)

paypal