diff --git a/.gitignore b/.gitignore index 8e0924c..0b76271 100644 --- a/.gitignore +++ b/.gitignore @@ -7,6 +7,9 @@ node_modules build dist +# editors +.idea + # misc .DS_Store .env @@ -20,6 +23,7 @@ yarn-debug.log* yarn-error.log* package-lock.json +yarn.lock /docs/node_modules /docs/.next diff --git a/CHANGELOG.md b/CHANGELOG.md index b09c979..bf3ff24 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,65 @@ +## 4.0.2 (2022-01-26) + +### ✨ Bugs + + * Fix onUploadAccepted signature when a preview is set + +Credits + +* [@MichielDeMey](https://github.com/MichielDeMey) + +## 4.0.1 (2022-01-21) + +### ✨ Bugs + + * Fix config props does not work in CSVReader + +Credits + +* [@jadenmazzone](https://github.com/jadenmazzone) + +## 4.0.0 (2022-01-18) + +### ✨ Features + + * Improve code performance + * Rewrite any existing based components to hooks + +Credits + +* [@Bunlong](https://github.com/Bunlong) + +## 3.18.2 (2022-01-04) + +### ✨ Bugs + + * Fix breaking change with webpack 5 + +Credits + +* ax0n-pr1me [@ax0n-pr1me](https://github.com/ax0n-pr1me) + +## 3.18.1 (2021-11-07) + +### ✨ Bugs + + * Fix a bug when component is unmounted immediately after file load in CSVReader + +Credits + +* Joey Baker [@joey-b](https://github.com/joey-b) + +## 3.18.0 (2021-11-05) + +### ✨ Bugs + + * Upgrade dependency + * Change readString API + +Credits + +* Graveheart [@Graveheart](https://github.com/Graveheart) + ## 3.17.2 (2021-09-4) ### ✨ Features diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 0000000..7febab6 --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,49 @@ +# Contributor Code of Conduct + +Our open source projects are no exception. Trust, respect, collaboration and transparency are core values we believe should live and breathe within our projects. Our community welcomes participants from around the world with different experiences, unique perspectives, and great ideas to share. + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment include: + +* Using welcoming and inclusive language +* Being respectful of differing viewpoints and experiences +* Gracefully accepting constructive criticism +* Attempting collaboration before conflict +* Focusing on what is best for the community +* Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +* Violence, threats of violence, or inciting others to commit self-harm +* The use of sexualized language or imagery and unwelcome sexual attention or advances +* Trolling, intentionally spreading misinformation, insulting/derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or electronic address, without explicit permission +* Abuse of the reporting process to intentionally harass or exclude others +* Advocating for, or encouraging, any of the above behavior +* Other conduct which could reasonably be considered inappropriate in a professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies within all project spaces, and it also applies when an individual is representing the project or its community in public spaces. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at `bunlong.van@gmail.com`. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 1.4, available at [https://www.contributor-covenant.org/version/1/4/code-of-conduct.html](https://www.contributor-covenant.org/version/1/4/code-of-conduct/) diff --git a/README.md b/README.md index 8545715..be91072 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,3 @@ -

- ⭐️ Please support us by giving a star! Thanks! ⭐️ -

- # react-papaparse react-papaparse is the fastest in-browser CSV (or delimited text) parser for React. It is full of useful features such as CSVReader, CSVDownloader, readString, jsonToCSV, readRemoteFile, ... etc. @@ -47,19 +43,17 @@ To learn how to use react-papaparse: * [Documentation](https://react-papaparse.github.io/docs) -FAQ: + ## 📚 Useful Features -* [CSVReader](https://react-papaparse.github.io/docs#local-files) – React component that handles csv files input and returns its content as array. -* [CSVDownloader](https://github.com/bunlong/react-papaparse#-csvdownloader) – React component that render the link/button which is clicked to download the data provided in CSV format. -* [readString](https://react-papaparse.github.io/docs#strings) – The function that read CSV comma separated string and returns its content as array. -* [readRemoteFile](https://react-papaparse.github.io/docs#remote-files) – The function that read remote CSV files and returns its content as array. -* [jsonToCSV](https://react-papaparse.github.io/docs#json-to-csv) – The function that read an array of object (json) and returns its content as CSV comma separated string. +* [CSVReader](https://github.com/Bunlong/react-papaparse#-csvreader) – React component that handles csv files input and returns its content as array. +* [CSVDownloader](https://github.com/Bunlong/react-papaparse#-csvdownloader) – React component that render the link/button which is clicked to download the data provided in CSV format. +* [readString](https://github.com/Bunlong/react-papaparse#-readstring) – The function that read CSV comma separated string and returns its content as array. +* [readRemoteFile](https://github.com/Bunlong/react-papaparse#-readremotefile) – The function that read remote CSV files and returns its content as array. +* [jsonToCSV](https://github.com/Bunlong/react-papaparse#-jsontocsv) – The function that read an array of object (json) and returns its content as CSV comma separated string. ## 💡 Usage @@ -70,108 +64,69 @@ FAQ: ![basic-upload](https://react-papaparse.github.io/static/images/csvreader1.png) ```javascript -import React, { Component } from 'react' - -import { CSVReader } from 'react-papaparse' - -const buttonRef = React.createRef() - -export default class CSVReader extends Component { - handleOpenDialog = (e) => { - // Note that the ref is set async, so it might be null at some point - if (buttonRef.current) { - buttonRef.current.open(e) - } - } - - handleOnFileLoad = (data) => { - console.log('---------------------------') - console.log(data) - console.log('---------------------------') - } - - handleOnError = (err, file, inputElem, reason) => { - console.log(err) - } - - handleOnRemoveFile = (data) => { - console.log('---------------------------') - console.log(data) - console.log('---------------------------') - } - - handleRemoveFile = (e) => { - // Note that the ref is set async, so it might be null at some point - if (buttonRef.current) { - buttonRef.current.removeFile(e) - } - } - - render() { - return ( - - {({ file }) => ( - - )} - - ) - } + + + + )} + + ); } ``` @@ -180,40 +135,163 @@ export default class CSVReader extends Component { ![click-and-drag-upload](https://react-papaparse.github.io/static/images/csvreader2.png) ```javascript -import React, { Component } from 'react' - -import { CSVReader } from 'react-papaparse' - -export default class CSVReader extends Component { - handleOnDrop = (data) => { - console.log('---------------------------') - console.log(data) - console.log('---------------------------') - } - - handleOnError = (err, file, inputElem, reason) => { - console.log(err) - } - - handleOnRemoveFile = (data) => { - console.log('---------------------------') - console.log(data) - console.log('---------------------------') - } - - render() { - return ( - - Drop CSV file here or click to upload. - - ) - } +import React, { useState, CSSProperties } from 'react'; + +import { + useCSVReader, + lightenDarkenColor, + formatFileSize, +} from 'react-papaparse'; + +const GREY = '#CCC'; +const GREY_LIGHT = 'rgba(255, 255, 255, 0.4)'; +const DEFAULT_REMOVE_HOVER_COLOR = '#A01919'; +const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor( + DEFAULT_REMOVE_HOVER_COLOR, + 40 +); +const GREY_DIM = '#686868'; + +const styles = { + zone: { + alignItems: 'center', + border: `2px dashed ${GREY}`, + borderRadius: 20, + display: 'flex', + flexDirection: 'column', + height: '100%', + justifyContent: 'center', + padding: 20, + } as CSSProperties, + file: { + background: 'linear-gradient(to bottom, #EEE, #DDD)', + borderRadius: 20, + display: 'flex', + height: 120, + width: 120, + position: 'relative', + zIndex: 10, + flexDirection: 'column', + justifyContent: 'center', + } as CSSProperties, + info: { + alignItems: 'center', + display: 'flex', + flexDirection: 'column', + paddingLeft: 10, + paddingRight: 10, + } as CSSProperties, + size: { + backgroundColor: GREY_LIGHT, + borderRadius: 3, + marginBottom: '0.5em', + justifyContent: 'center', + display: 'flex', + } as CSSProperties, + name: { + backgroundColor: GREY_LIGHT, + borderRadius: 3, + fontSize: 12, + marginBottom: '0.5em', + } as CSSProperties, + progressBar: { + bottom: 14, + position: 'absolute', + width: '100%', + paddingLeft: 10, + paddingRight: 10, + } as CSSProperties, + zoneHover: { + borderColor: GREY_DIM, + } as CSSProperties, + default: { + borderColor: GREY, + } as CSSProperties, + remove: { + height: 23, + position: 'absolute', + right: 6, + top: 6, + width: 23, + } as CSSProperties, +}; + +export default function CSVReader() { + const { CSVReader } = useCSVReader(); + const [zoneHover, setZoneHover] = useState(false); + const [removeHoverColor, setRemoveHoverColor] = useState( + DEFAULT_REMOVE_HOVER_COLOR + ); + + return ( + { + console.log('---------------------------'); + console.log(results); + console.log('---------------------------'); + setZoneHover(false); + }} + onDragOver={(event: DragEvent) => { + event.preventDefault(); + setZoneHover(true); + }} + onDragLeave={(event: DragEvent) => { + event.preventDefault(); + setZoneHover(false); + }} + > + {({ + getRootProps, + acceptedFile, + ProgressBar, + getRemoveFileProps, + Remove, + }: any) => ( + <> +
+ {acceptedFile ? ( + <> +
+
+ + {formatFileSize(acceptedFile.size)} + + {acceptedFile.name} +
+
+ +
+
{ + event.preventDefault(); + setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT); + }} + onMouseOut={(event: Event) => { + event.preventDefault(); + setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR); + }} + > + +
+
+ + ) : ( + 'Drop CSV file here or click to upload' + )} +
+ + )} + + ); } ``` @@ -222,40 +300,164 @@ export default class CSVReader extends Component { ![drag-no-click-upload](https://react-papaparse.github.io/static/images/csvreader3.png) ```javascript -import React, { Component } from 'react' - -import { CSVReader } from 'react-papaparse' - -export default class CSVReader extends Component { - handleOnDrop = (data) => { - console.log('---------------------------') - console.log(data) - console.log('---------------------------') - } - - handleOnError = (err, file, inputElem, reason) => { - console.log(err) - } - - handleOnRemoveFile = (data) => { - console.log('---------------------------') - console.log(data) - console.log('---------------------------') - } - - render() { - return ( - - Drop CSV file here to upload. - - ) - } +import React, { useState, CSSProperties } from 'react'; + +import { + useCSVReader, + lightenDarkenColor, + formatFileSize, +} from 'react-papaparse'; + +const GREY = '#CCC'; +const GREY_LIGHT = 'rgba(255, 255, 255, 0.4)'; +const DEFAULT_REMOVE_HOVER_COLOR = '#A01919'; +const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor( + DEFAULT_REMOVE_HOVER_COLOR, + 40 +); +const GREY_DIM = '#686868'; + +const styles = { + zone: { + alignItems: 'center', + border: `2px dashed ${GREY}`, + borderRadius: 20, + display: 'flex', + flexDirection: 'column', + height: '100%', + justifyContent: 'center', + padding: 20, + } as CSSProperties, + file: { + background: 'linear-gradient(to bottom, #EEE, #DDD)', + borderRadius: 20, + display: 'flex', + height: 120, + width: 120, + position: 'relative', + zIndex: 10, + flexDirection: 'column', + justifyContent: 'center', + } as CSSProperties, + info: { + alignItems: 'center', + display: 'flex', + flexDirection: 'column', + paddingLeft: 10, + paddingRight: 10, + } as CSSProperties, + size: { + backgroundColor: GREY_LIGHT, + borderRadius: 3, + marginBottom: '0.5em', + justifyContent: 'center', + display: 'flex', + } as CSSProperties, + name: { + backgroundColor: GREY_LIGHT, + borderRadius: 3, + fontSize: 12, + marginBottom: '0.5em', + } as CSSProperties, + progressBar: { + bottom: 14, + position: 'absolute', + width: '100%', + paddingLeft: 10, + paddingRight: 10, + } as CSSProperties, + zoneHover: { + borderColor: GREY_DIM, + } as CSSProperties, + default: { + borderColor: GREY, + } as CSSProperties, + remove: { + height: 23, + position: 'absolute', + right: 6, + top: 6, + width: 23, + } as CSSProperties, +}; + +export default function CSVReader() { + const { CSVReader } = useCSVReader(); + const [zoneHover, setZoneHover] = useState(false); + const [removeHoverColor, setRemoveHoverColor] = useState( + DEFAULT_REMOVE_HOVER_COLOR + ); + + return ( + { + console.log('---------------------------'); + console.log(results); + console.log('---------------------------'); + setZoneHover(false); + }} + onDragOver={(event: DragEvent) => { + event.preventDefault(); + setZoneHover(true); + }} + onDragLeave={(event: DragEvent) => { + event.preventDefault(); + setZoneHover(false); + }} + noClick + > + {({ + getRootProps, + acceptedFile, + ProgressBar, + getRemoveFileProps, + Remove, + }: any) => ( + <> +
+ {acceptedFile ? ( + <> +
+
+ + {formatFileSize(acceptedFile.size)} + + {acceptedFile.name} +
+
+ +
+
{ + event.preventDefault(); + setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT); + }} + onMouseOut={(event: Event) => { + event.preventDefault(); + setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR); + }} + > + +
+
+ + ) : ( + 'Drop CSV file here to upload' + )} +
+ + )} + + ); } ``` @@ -264,40 +466,164 @@ export default class CSVReader extends Component { ![click-no-drag-upload](https://react-papaparse.github.io/static/images/csvreader4.png) ```javascript -import React, { Component } from 'react' - -import { CSVReader } from 'react-papaparse' - -export default class CSVReader extends Component { - handleOnDrop = (data) => { - console.log('---------------------------') - console.log(data) - console.log('---------------------------') - } - - handleOnError = (err, file, inputElem, reason) => { - console.log(err) - } - - handleOnRemoveFile = (data) => { - console.log('---------------------------') - console.log(data) - console.log('---------------------------') - } - - render() { - return ( - - Click to upload. - - ) - } +import React, { useState, CSSProperties } from 'react'; + +import { + useCSVReader, + lightenDarkenColor, + formatFileSize, +} from 'react-papaparse'; + +const GREY = '#CCC'; +const GREY_LIGHT = 'rgba(255, 255, 255, 0.4)'; +const DEFAULT_REMOVE_HOVER_COLOR = '#A01919'; +const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor( + DEFAULT_REMOVE_HOVER_COLOR, + 40 +); +const GREY_DIM = '#686868'; + +const styles = { + zone: { + alignItems: 'center', + border: `2px dashed ${GREY}`, + borderRadius: 20, + display: 'flex', + flexDirection: 'column', + height: '100%', + justifyContent: 'center', + padding: 20, + } as CSSProperties, + file: { + background: 'linear-gradient(to bottom, #EEE, #DDD)', + borderRadius: 20, + display: 'flex', + height: 120, + width: 120, + position: 'relative', + zIndex: 10, + flexDirection: 'column', + justifyContent: 'center', + } as CSSProperties, + info: { + alignItems: 'center', + display: 'flex', + flexDirection: 'column', + paddingLeft: 10, + paddingRight: 10, + } as CSSProperties, + size: { + backgroundColor: GREY_LIGHT, + borderRadius: 3, + marginBottom: '0.5em', + justifyContent: 'center', + display: 'flex', + } as CSSProperties, + name: { + backgroundColor: GREY_LIGHT, + borderRadius: 3, + fontSize: 12, + marginBottom: '0.5em', + } as CSSProperties, + progressBar: { + bottom: 14, + position: 'absolute', + width: '100%', + paddingLeft: 10, + paddingRight: 10, + } as CSSProperties, + zoneHover: { + borderColor: GREY_DIM, + } as CSSProperties, + default: { + borderColor: GREY, + } as CSSProperties, + remove: { + height: 23, + position: 'absolute', + right: 6, + top: 6, + width: 23, + } as CSSProperties, +}; + +export default function CSVReader() { + const { CSVReader } = useCSVReader(); + const [zoneHover, setZoneHover] = useState(false); + const [removeHoverColor, setRemoveHoverColor] = useState( + DEFAULT_REMOVE_HOVER_COLOR + ); + + return ( + { + console.log('---------------------------'); + console.log(results); + console.log('---------------------------'); + setZoneHover(false); + }} + onDragOver={(event: DragEvent) => { + event.preventDefault(); + setZoneHover(true); + }} + onDragLeave={(event: DragEvent) => { + event.preventDefault(); + setZoneHover(false); + }} + noDrag + > + {({ + getRootProps, + acceptedFile, + ProgressBar, + getRemoveFileProps, + Remove, + }: any) => ( + <> +
+ {acceptedFile ? ( + <> +
+
+ + {formatFileSize(acceptedFile.size)} + + {acceptedFile.name} +
+
+ +
+
{ + event.preventDefault(); + setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT); + }} + onMouseOut={(event: Event) => { + event.preventDefault(); + setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR); + }} + > + +
+
+ + ) : ( + 'Click to upload' + )} +
+ + )} + + ); } ``` @@ -310,74 +636,78 @@ Just pass in the js object with an optional [configuration](https://react-papapa #### Button ```javascript -import React, { Component } from 'react' - -import { CSVDownloader } from 'react-papaparse' - -export default class CSVDownloader extends Component { - render() { - return ( - - Download - - ) - } +import React from 'react'; + +import { useCSVDownloader } from 'react-papaparse'; + +export default function CSVDownloader() { + const { CSVDownloader, Type } = useCSVDownloader(); + + return ( + + Download + + ); } ``` #### Link ```javascript -import React, { Component } from 'react' +import React from 'react'; + +import { useCSVDownloader } from 'react-papaparse'; -import { CSVDownloader } from 'react-papaparse' +export default function CSVDownloader() { + const { CSVDownloader, Type } = useCSVDownloader(); -export default class CSVDownloader extends Component { - render() { - return ( - - Download - - ) - } + > + Download + + ); } ``` @@ -386,95 +716,153 @@ export default class CSVDownloader extends Component { `data={}` can be a function that returns a data object. ```javascript - { - return [ - { - "Column 1": "1-1", - "Column 2": "1-2", - "Column 3": "1-3", - "Column 4": "1-4", +import React from 'react'; + +import { useCSVDownloader } from 'react-papaparse'; + +export default function CSVDownloader() { + const { CSVDownloader } = useCSVDownloader(); + + return ( + { + return [ + { + "Column 1": "1-1", + "Column 2": "1-2", + "Column 3": "1-3", + "Column 4": "1-4", + } + ]} } - ]} - } -> - Download - + > + Download + + ); +} ``` ### 🎀 readString ```javascript -import { readString } from 'react-papaparse' +import React from 'react'; -const str = `Column 1,Column 2,Column 3,Column 4 +import { usePapaParse } from 'react-papaparse'; + +export default function ReadString() { + const { readString } = usePapaParse(); + + const handleReadString = () => { + const csvString = `Column 1,Column 2,Column 3,Column 4 1-1,1-2,1-3,1-4 2-1,2-2,2-3,2-4 3-1,3-2,3-3,3-4 -4,5,6,7` - -const results = readString(str) +4,5,6,7`; + + readString(csvString, { + worker: true, + complete: (results) => { + console.log('---------------------------'); + console.log(results); + console.log('---------------------------'); + }, + }); + }; + + return ; +} ``` ### 🎀 readRemoteFile ```javascript -import { readRemoteFile } from 'react-papaparse' - -readRemoteFile( - url, - { - complete: (results) => { - console.log('Results:', results) - } - } -) +import React from 'react'; + +import { usePapaParse } from 'react-papaparse'; + +export default function ReadRemoteFile() { + const { readRemoteFile } = usePapaParse(); + + const handleReadRemoteFile = () => { + readRemoteFile(url, { + complete: (results) => { + console.log('---------------------------'); + console.log('Results:', results); + console.log('---------------------------'); + }, + }); + }; + + return ; +} ``` ### 🎀 jsonToCSV ```javascript -import { jsonToCSV } from 'react-papaparse' - -const jsonData = `[ - { - "Column 1": "1-1", - "Column 2": "1-2", - "Column 3": "1-3", - "Column 4": "1-4" - }, - { - "Column 1": "2-1", - "Column 2": "2-2", - "Column 3": "2-3", - "Column 4": "2-4" - }, - { - "Column 1": "3-1", - "Column 2": "3-2", - "Column 3": "3-3", - "Column 4": "3-4" - }, - { - "Column 1": 4, - "Column 2": 5, - "Column 3": 6, - "Column 4": 7 - } -]` +import React from 'react'; + +import { usePapaParse } from 'react-papaparse'; + +export default function JsonToCSV() { + const { jsonToCSV } = usePapaParse(); -const results = jsonToCSV(jsonData) + const handleJsonToCSV = () => { + const jsonData = `[ + { + "Column 1": "1-1", + "Column 2": "1-2", + "Column 3": "1-3", + "Column 4": "1-4" + }, + { + "Column 1": "2-1", + "Column 2": "2-2", + "Column 3": "2-3", + "Column 4": "2-4" + }, + { + "Column 1": "3-1", + "Column 2": "3-2", + "Column 3": "3-3", + "Column 4": "3-4" + }, + { + "Column 1": 4, + "Column 2": 5, + "Column 3": 6, + "Column 4": 7 + } + ]`; + const results = jsonToCSV(jsonData); + console.log('---------------------------'); + console.log('Results:', results); + console.log('---------------------------'); + }; + + return ; +} ``` -#### Header row support +#### Header Row Support If you tell react-papaparse there is a header row, each row will be organized by field name instead of index. ```javascript -const results = readString(csvString { - header: true -}) +import { usePapaParse } from 'react-papaparse'; + +const { readString } = usePapaParse(); + +readString(csvString, { + header: true, + worker: true, + complete: (results) => { + console.log('---------------------------'); + console.log(results); + console.log('---------------------------'); + }, +}); ``` #### Stream @@ -482,29 +870,41 @@ const results = readString(csvString { That's what streaming is for. Specify a step callback to receive the results row-by-row. This way, you won't load the whole file into memory and crash the browser. ```javascript -readRemoteFile('http://example.com/big.csv', { +import { usePapaParse } from 'react-papaparse'; + +const { readRemoteFile } = usePapaParse(); + +readRemoteFile(url, { step: (row) => { - console.log('Row:', row.data) + console.log('Row:', row.data); }, complete: () => { - console.log('All done!') + console.log('All done!'); } -}) +}); ``` ## 📜 Changelog -Latest version 3.17.2 (2021-09-04): +Latest version 4.0.2 (2022-01-26): - * Upgrade dependencies + * Fix onUploadAccepted signature when a preview is set -Details changes for each release are documented in the [CHANGELOG.md](https://github.com/Bunlong/react-papaparse/blob/master/CHANGELOG.md). +Version 4.0.1 (2022-01-21): -## 🛣️ Roadmap + * Fix config props does not work in CSVReader + +Version 4.0.0 (2022-01-18): -### 🆕 v4.0.x * Improve code performance * Rewrite any existing based components to hooks + +Details changes for each release are documented in the [CHANGELOG.md](https://github.com/Bunlong/react-papaparse/blob/master/CHANGELOG.md). + +## 🛣️ Roadmap + +### 🆕 v4.1.x + * CSVReader multiple files drag and drop ## ❗ Issues @@ -751,6 +1151,35 @@ How to contribute: + + + + Venelin Banov +
+ + Venelin Banov + + + + + + Joey Baker +
+ + Joey Baker + + + + + + Michiel De Mey +
+ + Michiel De Mey + + + + ## 👨‍👩‍👦 Advertisement diff --git a/demo/CSVDownloader1.js b/demo/CSVDownloader1.js deleted file mode 100644 index f20fd0d..0000000 --- a/demo/CSVDownloader1.js +++ /dev/null @@ -1,41 +0,0 @@ -import React, { Component } from 'react'; -import { CSVDownloader } from 'react-papaparse'; - -export default class CSVDownloader1 extends Component { - render() { - return ( - - Download - - ); - } -} diff --git a/demo/CSVDownloader2.js b/demo/CSVDownloader2.js deleted file mode 100644 index c3a8199..0000000 --- a/demo/CSVDownloader2.js +++ /dev/null @@ -1,20 +0,0 @@ -import React, { Component } from 'react'; -import { CSVDownloader } from 'react-papaparse'; - -export default class CSVDownloader2 extends Component { - render() { - return ( - - Download - - ); - } -} diff --git a/demo/CSVReader1.js b/demo/CSVReader1.js deleted file mode 100644 index 8cb6233..0000000 --- a/demo/CSVReader1.js +++ /dev/null @@ -1,107 +0,0 @@ -import React, { Component } from 'react'; -import { CSVReader } from 'react-papaparse'; - -const buttonRef = React.createRef(); - -export default class CSVReader1 extends Component { - handleOpenDialog = (e) => { - // Note that the ref is set async, so it might be null at some point - if (buttonRef.current) { - buttonRef.current.open(e); - } - }; - - handleOnFileLoad = (data) => { - console.log('---------------------------'); - console.log(data); - console.log('---------------------------'); - }; - - handleOnError = (err, file, inputElem, reason) => { - console.log('---------------------------'); - console.log(err); - console.log('---------------------------'); - }; - - handleOnRemoveFile = (data) => { - console.log('---------------------------'); - console.log(data); - console.log('---------------------------'); - }; - - handleRemoveFile = (e) => { - // Note that the ref is set async, so it might be null at some point - if (buttonRef.current) { - buttonRef.current.removeFile(e); - } - }; - - render() { - return ( - <> -
Basic Upload
- - {({ file }) => ( - - )} - - - ); - } -} diff --git a/demo/CSVReader2.js b/demo/CSVReader2.js deleted file mode 100644 index 182bd20..0000000 --- a/demo/CSVReader2.js +++ /dev/null @@ -1,36 +0,0 @@ -import React, { Component } from 'react'; -import { CSVReader } from 'react-papaparse'; - -export default class CSVReader2 extends Component { - handleOnDrop = (data) => { - console.log('---------------------------'); - console.log(data); - console.log('---------------------------'); - }; - - handleOnError = (err, file, inputElem, reason) => { - console.log(err); - }; - - handleOnRemoveFile = (data) => { - console.log('---------------------------'); - console.log(data); - console.log('---------------------------'); - }; - - render() { - return ( - <> -
Click and Drag Upload
- - Drop CSV file here or click to upload. - - - ); - } -} diff --git a/demo/CSVReader3.js b/demo/CSVReader3.js deleted file mode 100644 index 1d7a398..0000000 --- a/demo/CSVReader3.js +++ /dev/null @@ -1,37 +0,0 @@ -import React, { Component } from 'react'; -import { CSVReader } from 'react-papaparse'; - -export default class CSVReader3 extends Component { - handleOnDrop = (data) => { - console.log('---------------------------'); - console.log(data); - console.log('---------------------------'); - }; - - handleOnError = (err, file, inputElem, reason) => { - console.log(err); - }; - - handleOnRemoveFile = (data) => { - console.log('---------------------------'); - console.log(data); - console.log('---------------------------'); - }; - - render() { - return ( - <> -
Drag ( No Click ) Upload
- - Drop CSV file here to upload. - - - ); - } -} diff --git a/demo/CSVReader4.js b/demo/CSVReader4.js deleted file mode 100644 index ee4ee7d..0000000 --- a/demo/CSVReader4.js +++ /dev/null @@ -1,37 +0,0 @@ -import React, { Component } from 'react'; -import { CSVReader } from 'react-papaparse'; - -export default class CSVReader4 extends Component { - handleOnDrop = (data) => { - console.log('---------------------------'); - console.log(data); - console.log('---------------------------'); - }; - - handleOnError = (err, file, inputElem, reason) => { - console.log(err); - }; - - handleOnRemoveFile = (data) => { - console.log('---------------------------'); - console.log(data); - console.log('---------------------------'); - }; - - render() { - return ( - <> -
Click ( No Drag ) Upload
- - Click to upload. - - - ); - } -} diff --git a/demo/JsonToCSV.js b/demo/JsonToCSV.js deleted file mode 100644 index f944cbc..0000000 --- a/demo/JsonToCSV.js +++ /dev/null @@ -1,43 +0,0 @@ -import React, { Component } from 'react'; -import { jsonToCSV } from 'react-papaparse'; - -export default class JsonToCSV extends Component { - handleClick = () => { - const jsonData = `[ - { - "Column 1": "1-1", - "Column 2": "1-2", - "Column 3": "1-3", - "Column 4": "1-4" - }, - { - "Column 1": "2-1", - "Column 2": "2-2", - "Column 3": "2-3", - "Column 4": "2-4" - }, - { - "Column 1": "3-1", - "Column 2": "3-2", - "Column 3": "3-3", - "Column 4": "3-4" - }, - { - "Column 1": 4, - "Column 2": 5, - "Column 3": 6, - "Column 4": 7 - } -]`; - - const results = jsonToCSV(jsonData); - - console.log('---------------------------'); - console.log(results); - console.log('---------------------------'); - }; - - render() { - return ; - } -} diff --git a/demo/ReadRemoteFile.js b/demo/ReadRemoteFile.js deleted file mode 100644 index 3d2f6c1..0000000 --- a/demo/ReadRemoteFile.js +++ /dev/null @@ -1,16 +0,0 @@ -import React, { Component } from 'react'; -import { readRemoteFile } from 'react-papaparse'; - -export default class ReadRemoteFile extends Component { - handleClick = () => { - readRemoteFile('http://example.com/file.csv', { - complete: (results) => { - console.log('Results:', results); - }, - }); - }; - - render() { - return ; - } -} diff --git a/demo/ReadString.js b/demo/ReadString.js deleted file mode 100644 index 4111f34..0000000 --- a/demo/ReadString.js +++ /dev/null @@ -1,22 +0,0 @@ -import React, { Component } from 'react'; -import { readString } from 'react-papaparse'; - -export default class ReadString extends Component { - handleClick = () => { - const str = `Column 1,Column 2,Column 3,Column 4 -1-1,1-2,1-3,1-4 -2-1,2-2,2-3,2-4 -3-1,3-2,3-3,3-4 -4,5,6,7`; - - const results = readString(str); - - console.log('---------------------------'); - console.log(results); - console.log('---------------------------'); - }; - - render() { - return ; - } -} diff --git a/docs/package.json b/docs/package.json index 8ca2ab0..7876155 100644 --- a/docs/package.json +++ b/docs/package.json @@ -15,10 +15,11 @@ "license": "MIT", "dependencies": { "next": "^10.1.3", + "prismjs": "^1.26.0", "raw-loader": "^4.0.0", - "react": "^16.12.0", - "react-dom": "^16.12.0", - "react-papaparse": "^3.17.0", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-papaparse": "^4.0.0", "react-tabs": "^3.1.0" }, "devDependencies": { diff --git a/docs/pages/_app.js b/docs/pages/_app.js index c521700..97ae19e 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -3,6 +3,7 @@ import Head from 'next/head'; import App from 'next/app'; import 'react-tabs/style/react-tabs.css'; +// import 'prismjs/themes/prism-tomorrow.css'; class CustomApp extends App { // Only uncomment this method if you have blocking data requirements for @@ -21,6 +22,7 @@ class CustomApp extends App { const { Component, pageProps } = this.props; const pageName = this.props.router.route.substr(1); let title = ''; + if (pageName === '') { title = 'react-papaparse'; } else if (pageName === 'demo') { @@ -40,7 +42,7 @@ class CustomApp extends App { - {/* ====== SEO ======= */} + {/* == SEO == */} - {/* ================== */} + {/* ========= */} Bunlong
- © 2018-2021 + © 2018-2022
@@ -165,7 +167,6 @@ class CustomApp extends App {
-