Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
react-csv-downloader
Advanced tools
A simple react component to allow download CSV file from js object
npm install --save react-csv-downloader
Use with children component
import CsvDownloader from 'react-csv-downloader';
<CsvDownloader>
<button>Download</button>
</CsvDownloader>;
Use without children component
<CsvDownloader text="Download" />
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} />;
pass a function to compute datas to be downloaded
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',
},
]);
};
<CsvDownloader datas={asyncFnComputeDate} />;
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
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.
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'
If you just need to get CSV contents, use import { toCsv } from 'react-csv-downloader';
to import toCsv function and use it directly.
FAQs
React csv downloader
The npm package react-csv-downloader receives a total of 15,327 weekly downloads. As such, react-csv-downloader popularity was classified as popular.
We found that react-csv-downloader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.