From 786ad9b03ec4e14577c44b6c64f1c54ca079015b Mon Sep 17 00:00:00 2001
From: Bunlong <bunlong.van@gmail.com>
Date: Sun, 7 Aug 2022 16:46:36 +0700
Subject: [PATCH 1/4] Export readString, readRemoteFile, jsonToCSV as pure
 function

---
 src/react-papaparse.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/react-papaparse.ts b/src/react-papaparse.ts
index 5628ee3..0beea23 100644
--- a/src/react-papaparse.ts
+++ b/src/react-papaparse.ts
@@ -11,3 +11,7 @@ export { formatFileSize, lightenDarkenColor } from './utils';
 export { usePapaParse } from './usePapaParse';
 export { useCSVDownloader } from './useCSVDownloader';
 export { useCSVReader } from './useCSVReader';
+
+export { readString } from './readString';
+export { readRemoteFile } from './readRemoteFile';
+export { jsonToCSV } from './jsonToCSV';

From e3a9a314266b1dedad59bcd72ab38035b33e255a Mon Sep 17 00:00:00 2001
From: Bunlong <bunlong.van@gmail.com>
Date: Sun, 7 Aug 2022 17:37:29 +0700
Subject: [PATCH 2/4] Add demo

---
 supports/create-react-app/src/App.js | 364 ++++++++++++++++-----------
 1 file changed, 224 insertions(+), 140 deletions(-)

diff --git a/supports/create-react-app/src/App.js b/supports/create-react-app/src/App.js
index 3b8068d..6679e00 100644
--- a/supports/create-react-app/src/App.js
+++ b/supports/create-react-app/src/App.js
@@ -1,164 +1,248 @@
-import React, { useState } from 'react'
-import { CSVReader, CSVDownloader, readString } from 'react-papaparse'
+// import React, { useState } from 'react'
+// import { CSVReader, CSVDownloader, readString } from 'react-papaparse'
 
-export default function App() {
-  const [isReset, setIsReset] = useState(false);
+// export default function App() {
+//   const [isReset, setIsReset] = useState(false);
 
-  const handleReset = () => {
-    setIsReset(!isReset)
-  }
+//   const handleReset = () => {
+//     setIsReset(!isReset)
+//   }
 
-  const handleOnDrop = (data) => {
-    console.log('---------------------------')
-    console.log(data)
-    console.log('---------------------------')
-  }
+//   const handleOnDrop = (data) => {
+//     console.log('---------------------------')
+//     console.log(data)
+//     console.log('---------------------------')
+//   }
 
-  const handleOnError = (
-    err,
-    // file,
-    // inputElem,
-    // reason
-  ) => {
-    console.log(err)
-  }
+//   const handleOnError = (
+//     err,
+//     // file,
+//     // inputElem,
+//     // reason
+//   ) => {
+//     console.log(err)
+//   }
 
-  const handleOnRemoveFile = (data) => {
-    console.log('---------------------------')
-    console.log(data)
-    console.log('---------------------------')
-  }
+//   const handleOnRemoveFile = (data) => {
+//     console.log('---------------------------')
+//     console.log(data)
+//     console.log('---------------------------')
+//   }
+
+//   const handleClick = () => {
+//     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`;
+
+//     readString(csvString, {
+//       worker: true,
+//       complete: (results) => {
+//         console.log('---------------------------');
+//         console.log(results);
+//         console.log('---------------------------');
+//       },
+//     })
+//   };
+
+//   return (
+//     <>
+//       <CSVReader
+//         isReset={isReset}
+//         onDrop={handleOnDrop}
+//         onError={handleOnError}
+//         // noDrag
+//         addRemoveButton
+//         onRemoveFile={handleOnRemoveFile}
+//         style={{
+//           dropArea: {
+//             borderColor: 'pink',
+//             borderRadius: 20,
+//           },
+//           dropAreaActive: {
+//             borderColor: 'red',
+//           },
+//           dropFile: {
+//             width: 100,
+//             height: 120,
+//             background: '#ccc',
+//           },
+//           fileSizeInfo: {
+//             color: '#fff',
+//             backgroundColor: '#000',
+//             borderRadius: 3,
+//             lineHeight: 1,
+//             marginBottom: '0.5em',
+//             padding: '0 0.4em',
+//           },
+//           fileNameInfo: {
+//             color: '#fff',
+//             backgroundColor: '#eee',
+//             borderRadius: 3,
+//             fontSize: 14,
+//             lineHeight: 1,
+//             padding: '0 0.4em',
+//           },
+//           removeButton: {
+//             color: 'blue',
+//           },
+//           progressBar: {
+//             backgroundColor: 'pink',
+//           },
+//         }}
+//       >
+//         <span>Click to upload.</span>
+//       </CSVReader>
+//       <button onClick={() => handleReset()}>Reset</button>
+//       <CSVDownloader
+//         data={[
+//           {
+//             "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,
+//           },
+//         ]}
+//         type="button"
+//         filename={'filename'}
+//         config={
+//           {
+//             delimiter: ';',
+//           }
+//         }
+//       >
+//         Download
+//       </CSVDownloader>
+//       <CSVDownloader
+//         data={`Column 1,Column 2,Column 3,Column 4
+// 1-1,1-2,1-3,1-4
+// #2-1,मुकेश,ខ្ញុំ,2-4
+// 3-1,3-2,អ្នក,3-4
+// 4,5,6,7`}
+//         filename={'filename'}
+//         bom={true}
+//       >
+//         Download
+//       </CSVDownloader>
+//       <CSVDownloader
+//         filename={'filename'}
+//         data={() => {
+//           return [
+//             {
+//               "Column 1": "1-1",
+//               "Column 2": "1-2",
+//               "Column 3": "1-3",
+//               "Column 4": "1-4",
+//             }
+//           ]}
+//         }
+//       >
+//         Download
+//       </CSVDownloader>
+//       <button onClick={() => handleClick()}>readString</button>
+//     </>
+//   )
+// }
+
+import React from 'react'
+import {
+  // readString,
+  // jsonToCSV,
+  // readRemoteFile,
+  usePapaParse,
+} from 'react-papaparse'
+
+export default function App() {
+  const {
+    readString,
+    jsonToCSV,
+    readRemoteFile,
+  } = usePapaParse()
 
   const handleClick = () => {
     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`;
+4,5,6,7`
 
     readString(csvString, {
       worker: true,
       complete: (results) => {
-        console.log('---------------------------');
-        console.log(results);
-        console.log('---------------------------');
+        console.log('---------------------------')
+        console.log(results)
+        console.log('---------------------------')
       },
     })
-  };
+  }
+
+  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('---------------------------')
+  }
+
+  const handleReadRemoteFile = () => {
+    readRemoteFile('https://react-papaparse.js.org/static/csv/normal.csv', {
+      complete: (results) => {
+        console.log('---------------------------')
+        console.log('Results:', results)
+        console.log('---------------------------')
+      },
+    })
+  }
 
   return (
     <>
-      <CSVReader
-        isReset={isReset}
-        onDrop={handleOnDrop}
-        onError={handleOnError}
-        // noDrag
-        addRemoveButton
-        onRemoveFile={handleOnRemoveFile}
-        style={{
-          dropArea: {
-            borderColor: 'pink',
-            borderRadius: 20,
-          },
-          dropAreaActive: {
-            borderColor: 'red',
-          },
-          dropFile: {
-            width: 100,
-            height: 120,
-            background: '#ccc',
-          },
-          fileSizeInfo: {
-            color: '#fff',
-            backgroundColor: '#000',
-            borderRadius: 3,
-            lineHeight: 1,
-            marginBottom: '0.5em',
-            padding: '0 0.4em',
-          },
-          fileNameInfo: {
-            color: '#fff',
-            backgroundColor: '#eee',
-            borderRadius: 3,
-            fontSize: 14,
-            lineHeight: 1,
-            padding: '0 0.4em',
-          },
-          removeButton: {
-            color: 'blue',
-          },
-          progressBar: {
-            backgroundColor: 'pink',
-          },
-        }}
-      >
-        <span>Click to upload.</span>
-      </CSVReader>
-      <button onClick={() => handleReset()}>Reset</button>
-      <CSVDownloader
-        data={[
-          {
-            "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,
-          },
-        ]}
-        type="button"
-        filename={'filename'}
-        config={
-          {
-            delimiter: ';',
-          }
-        }
-      >
-        Download
-      </CSVDownloader>
-      <CSVDownloader
-        data={`Column 1,Column 2,Column 3,Column 4
-1-1,1-2,1-3,1-4
-#2-1,मुकेश,ខ្ញុំ,2-4
-3-1,3-2,អ្នក,3-4
-4,5,6,7`}
-        filename={'filename'}
-        bom={true}
-      >
-        Download
-      </CSVDownloader>
-      <CSVDownloader
-        filename={'filename'}
-        data={() => {
-          return [
-            {
-              "Column 1": "1-1",
-              "Column 2": "1-2",
-              "Column 3": "1-3",
-              "Column 4": "1-4",
-            }
-          ]}
-        }
-      >
-        Download
-      </CSVDownloader>
       <button onClick={() => handleClick()}>readString</button>
+      <button onClick={() => handleJsonToCSV()}>jsonToCSV</button>
+      <button onClick={() => handleReadRemoteFile()}>readRemoteFile</button>
     </>
   )
 }

From 2063ec6138fee2b9299da4f611dd89b95d4e343d Mon Sep 17 00:00:00 2001
From: Bunlong <bunlong.van@gmail.com>
Date: Sun, 7 Aug 2022 17:40:14 +0700
Subject: [PATCH 3/4] Update README

---
 README.md | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/README.md b/README.md
index ab4f7e4..5fc8571 100644
--- a/README.md
+++ b/README.md
@@ -1192,6 +1192,15 @@ How to contribute:
         </sub>
       </a>
     </td>
+    <td align="center">
+      <a href="https://github.com/s5s5">
+        <img src="https://avatars.githubusercontent.com/u/473706?v=4" width="100" alt="Xiaochao Liu" />
+        <br />
+        <sub>
+          <b>Xiaochao Liu</b>
+        </sub>
+      </a>
+    </td>
   </tr>
 </table>
 

From a10c1ea2b8f1566ee25662002f6b4c631b7810ba Mon Sep 17 00:00:00 2001
From: Bunlong <bunlong.van@gmail.com>
Date: Sun, 7 Aug 2022 17:54:31 +0700
Subject: [PATCH 4/4] Update version

---
 CHANGELOG.md | 10 ++++++++++
 README.md    |  8 ++++++--
 package.json |  2 +-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c370e26..2885750 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,13 @@
+## 4.1.0 (2022-08-07)
+
+### ✨ Bugs
+
+  * Import readString, readRemoteFile and jsonToCSV as pure function
+
+Credits
+
+* [@s5s5](https://github.com/s5s5)
+
 ## 4.0.4 (2022-08-06)
 
 ### ✨ Bugs
diff --git a/README.md b/README.md
index 5fc8571..11dda74 100644
--- a/README.md
+++ b/README.md
@@ -886,11 +886,15 @@ readRemoteFile(url, {
 
 ## 📜 Changelog
 
-Latest version 4.0.4 (2022-08-06):
+Latest version 4.1.0 (2022-08-07):
+
+  * Import readString, readRemoteFile and jsonToCSV as pure function
+
+Version 4.0.4 (2022-08-06):
 
   * Add optional required prop for input file
 
-Latest version 4.0.2 (2022-01-26):
+Version 4.0.2 (2022-01-26):
 
   * Fix onUploadAccepted signature when a preview is set
 
diff --git a/package.json b/package.json
index 4c75752..46dd2f6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-papaparse",
-  "version": "4.0.4",
+  "version": "4.1.0",
   "description": "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.",
   "author": "Bunlong <bunlong.van@gmail.com>",
   "license": "MIT",