├── .babelrc ├── .gitattributes ├── .github └── workflows │ └── nodejs-ci.yml ├── .gitignore ├── LICENSE ├── docs ├── index.mdx ├── mockData.js └── root.js ├── package-lock.json ├── package.json ├── readme.md ├── renovate.json ├── src └── index.js └── test ├── __snapshots__ └── index.test.js.snap ├── index.test.js └── jestsetup.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"], 3 | "plugins": ["@babel/plugin-transform-spread"] 4 | } 5 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.github/workflows/nodejs-ci.yml: -------------------------------------------------------------------------------- 1 | name: Node.js CI 2 | 3 | on: 4 | push: 5 | branches: [master] 6 | pull_request: 7 | branches: [master] 8 | 9 | jobs: 10 | build: 11 | runs-on: ubuntu-latest 12 | 13 | strategy: 14 | matrix: 15 | node-version: [16.x] 16 | 17 | steps: 18 | - uses: actions/checkout@v2 19 | - name: Use Node.js ${{ matrix.node-version }} 20 | uses: actions/setup-node@v1 21 | with: 22 | node-version: ${{ matrix.node-version }} 23 | - run: npm ci 24 | - run: npm run build 25 | - run: npm run test 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # parcel-bundler cache (https://parceljs.org/) 61 | .cache 62 | 63 | # next.js build output 64 | .next 65 | 66 | # nuxt.js build output 67 | .nuxt 68 | 69 | # vuepress build output 70 | .vuepress/dist 71 | 72 | # Serverless directories 73 | .serverless 74 | 75 | # FuseBox cache 76 | .fusebox/ 77 | 78 | # Demo site 79 | public 80 | 81 | # transpiled output 82 | dist 83 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Coston Perkins 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /docs/index.mdx: -------------------------------------------------------------------------------- 1 | export { Root } from "./root.js"; 2 | import { Head } from "mdx-go"; 3 | 4 | # ⌗ react-json-to-csv 5 | 6 | A react button component to easily generate csv downloads of your json data. ✨ 7 | 8 | [![npm package version](https://badge.fury.io/js/react-json-to-csv.svg)](https://www.npmjs.com/package/react-json-to-csv)  9 | [![npm downloads](https://img.shields.io/npm/dm/react-json-to-csv)](https://www.npmjs.com/package/react-json-to-csv)  10 | [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io) 11 | 12 | 13 | react-json-to-csv 14 | 15 | 16 | ## Features 17 | 18 | - Create a csv download from json data 19 | - Lightweight 20 | - Easy to use 21 | - optional filename 22 | 23 | ## Install 24 | 25 | Install with npm: 26 | 27 | ```sh 28 | npm i react-json-to-csv 29 | ``` 30 | 31 | Or load from a CDN: 32 | 33 | ```html 34 | 35 | ``` 36 | 37 | ## Example Usage 38 | 39 | Easy, breezy, just add data. 40 | 41 | ```.jsx 42 | 43 | ``` 44 | 45 | Add a filename or other props. 46 | 47 | ```.jsx 48 | 66 | Good Data ✨ 67 | 68 | ``` 69 | 70 | ## Props 71 | 72 | | # | Property | Type | Requirement | Default | Description | 73 | | --- | --------- | ---------- | ----------- | ------------------------- | ----------------------------------------------------------------------------- | 74 | | 1 | data | `[]` | `required` | | array of objects | 75 | | 2 | filename | `string` | `optional` | "export.csv" | The filename. The `.csv` extention will be edded if not included in file name | 76 | | 3 | delimiter | `string` | `optional` | ";" | fields separator | 77 | | 4 | headers | `string[]` | `optional` | provided data object keys | List of columns that will be used in the final CSV file. | 78 | 79 | ## Contributing 80 | 81 | Please help provide good data faster! Submit any issues and/or make a pull request! 82 | -------------------------------------------------------------------------------- /docs/mockData.js: -------------------------------------------------------------------------------- 1 | const mockData = [{"ID":1,"First Name":"Sarajane","Last Name":"Wheatman","Email":"swheatman0@google.nl","Language":"Zulu","IP Address":"40.98.252.240"}, 2 | {"ID":2,"First Name":"Linell","Last Name":"Humpherston","Email":"lhumpherston1@google.com.br","Language":"Czech","IP Address":"82.225.151.150"}, 3 | {"ID":3,"First Name":"Gabie","Last Name":"Casella","Email":"gcasella2@un.org","Language":"Greek","IP Address":"228.48.116.99"}, 4 | {"ID":4,"First Name":"Chelsie","Last Name":"Shout","Email":"cshout3@php.net","Language":"Persian","IP Address":"81.121.60.176"}, 5 | {"ID":5,"First Name":"Marlow","Last Name":"Janzen","Email":"mjanzen4@auda.org.au","Language":"New Zealand Sign Language","IP Address":"205.25.250.114"}, 6 | {"ID":6,"First Name":"Candra","Last Name":"Chelsom","Email":"cchelsom5@cargocollective.com","Language":"Icelandic","IP Address":"158.238.138.112"}, 7 | {"ID":7,"First Name":"Hal","Last Name":"Elcum","Email":"helcum6@cyberchimps.com","Language":"Quechua","IP Address":"75.95.150.75"}, 8 | {"ID":8,"First Name":"Fanya","Last Name":"Yateman","Email":"fyateman7@blogs.com","Language":"Georgian","IP Address":"20.159.169.4"}, 9 | {"ID":9,"First Name":"Regen","Last Name":"Ismirnioglou","Email":"rismirnioglou8@samsung.com","Language":"Bengali","IP Address":"69.221.94.212"}, 10 | {"ID":10,"First Name":"Veronika","Last Name":"Gaither","Email":"vgaither9@trellian.com","Language":"Persian","IP Address":"200.55.200.251"}] 11 | 12 | export default mockData -------------------------------------------------------------------------------- /docs/root.js: -------------------------------------------------------------------------------- 1 | // example Root component 2 | import React from 'react' 3 | import { StyleProvider } from 'mdx-go' 4 | import CsvDownloadButton from '../src/index' 5 | import mockData from './mockData.js' 6 | 7 | 8 | const components = { 9 | CsvDownloadButton, 10 | mockData, 11 | } 12 | 13 | const theme = { 14 | LiveCode: { 15 | borderRadius: '4px', 16 | }, 17 | LiveEditor: { 18 | color: 'plum', 19 | backgroundColor: 'black', 20 | overflow: 'scroll' 21 | } 22 | } 23 | 24 | 25 | export const Root = props =>( 26 | 27 |
36 | {props.children} 37 |
38 | 39 | 40 | ) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-json-to-csv", 3 | "version": "1.2.0", 4 | "description": "A react button component to easily generate csv downloads of your json data.", 5 | "main": "dist/index.js", 6 | "files": [ 7 | "dist/index.js" 8 | ], 9 | "author": "Coston Perkins (https://coston.io)", 10 | "homepage": "https://github.com/coston/react-json-to-csv", 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/coston/react-json-to-csv.git" 14 | }, 15 | "bugs": { 16 | "url": "https://github.com/coston/react-json-to-csv/issues" 17 | }, 18 | "license": "MIT", 19 | "scripts": { 20 | "dev": "mdx-go docs && npm run watch", 21 | "docs": "mdx-go build docs -d public", 22 | "build": "babel -d dist src --copy-files", 23 | "clean": "rm -rf dist && mkdir dist", 24 | "watch": "babel -w -d dist src --copy-files", 25 | "format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js'", 26 | "start": "npm run build; npm run dev", 27 | "preversion": "npm run test && npm run format && npm run clean && npm run build && npm run docs", 28 | "postpublish": "git push && git push --tag", 29 | "test": "jest", 30 | "test:watch": "jest --watch", 31 | "test:coverage": "jest --coverage", 32 | "coveralls": "jest --coverage && cat ./coverage/lcov.info | coveralls" 33 | }, 34 | "jest": { 35 | "setupFiles": [ 36 | "./test/jestsetup.js" 37 | ], 38 | "testURL": "http://localhost/", 39 | "collectCoverage": true, 40 | "snapshotSerializers": [ 41 | "enzyme-to-json/serializer" 42 | ], 43 | "moduleNameMapper": { 44 | "^.+\\.(css|scss)$": "identity-obj-proxy" 45 | } 46 | }, 47 | "devDependencies": { 48 | "@babel/cli": "7.21.0", 49 | "@babel/core": "7.21.4", 50 | "@babel/plugin-transform-spread": "7.20.7", 51 | "@babel/preset-env": "7.21.4", 52 | "@babel/preset-react": "7.18.6", 53 | "core-js": "3.29.1", 54 | "coveralls": "3.1.1", 55 | "enzyme": "3.11.0", 56 | "enzyme-adapter-react-16": "1.15.7", 57 | "enzyme-to-json": "3.6.2", 58 | "identity-obj-proxy": "3.0.0", 59 | "instant-table": "3.0.0", 60 | "jest": "29.4.3", 61 | "mdx-go": "2.0.0-32", 62 | "prettier": "2.8.4", 63 | "prop-types": "15.8.1", 64 | "react": "18.2.0", 65 | "react-dom": "18.2.0", 66 | "react-live": "3.1.2", 67 | "react-test-renderer": "18.2.0" 68 | }, 69 | "keywords": [ 70 | "react", 71 | "react-component", 72 | "json", 73 | "csv", 74 | "button", 75 | "download" 76 | ], 77 | "directories": { 78 | "test": "test" 79 | }, 80 | "dependencies": { 81 | "json-to-csv-export": "2.1.1" 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # ⌗ react-json-to-csv 2 | 3 | A react button component to easily generate csv downloads of your json data. ✨ 4 | 5 | [![npm package version](https://badge.fury.io/js/react-json-to-csv.svg)](https://www.npmjs.com/package/react-json-to-csv)  6 | [![npm downloads](https://img.shields.io/npm/dm/react-json-to-csv.svg)](https://www.npmjs.com/package/react-json-to-csv)  7 | [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io) 8 | 9 | ## Live Demo 10 | 11 | [https://react-json-to-csv.coston.io](https://react-json-to-csv.coston.io) 12 | 13 | ## Features 14 | 15 | - Create a csv download from json data 16 | - Lightweight 17 | - Easy to use 18 | - optional filename 19 | 20 | ## Install 21 | 22 | Install with npm: 23 | 24 | ```sh 25 | npm i react-json-to-csv 26 | ``` 27 | 28 | Or load from a CDN: 29 | 30 | ```html 31 |