diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8aee13b..879aa92 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,14 @@
+## 4.0.0 (2022-01-017)
+
+### ✨ Features
+
+  * Improve code performance
+  * Rewrite any existing based components to hooks
+
+Credits
+
+* [@Bunlong](https://github.com/Bunlong)
+
 ## 3.18.2 (2022-01-04)
 
 ### ✨ Bugs
diff --git a/README.md b/README.md
index 95aef9b..27f903f 100644
--- a/README.md
+++ b/README.md
@@ -43,11 +43,9 @@ To learn how to use react-papaparse:
 
 * [Documentation](https://react-papaparse.github.io/docs)
 
-FAQ:
+<!-- FAQ:
 
-* [How to customize CSVReader (Drag to upload) style?](https://github.com/Bunlong/react-papaparse/wiki/CSVReader-(Drag-to-Upload)-Style)
-* [How to reset CSVReader?](https://react-papaparse.js.org/docs#local-files)
-* [Sample of using CSVReader isSet](https://github.com/Bunlong/react-papaparse/wiki/Sample-of-using-CSVReader-isSet)
+* [Sample of using CSVReader isSet](https://github.com/Bunlong/react-papaparse/wiki/Sample-of-using-CSVReader-isSet) -->
 
 ## 📚 Useful Features
 
@@ -66,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 (
-      <CSVReader
-        ref={buttonRef}
-        onFileLoad={this.handleOnFileLoad}
-        onError={this.handleOnError}
-        noClick
-        noDrag
-        onRemoveFile={this.handleOnRemoveFile}
-      >
-        {({ file }) => (
-          <aside
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              marginBottom: 10
-            }}
-          >
-            <button
-              type='button'
-              onClick={this.handleOpenDialog}
-              style={{
-                borderRadius: 0,
-                marginLeft: 0,
-                marginRight: 0,
-                width: '40%',
-                paddingLeft: 0,
-                paddingRight: 0
-              }}
-            >
+import React, { CSSProperties } from 'react';
+
+import { useCSVReader } from 'react-papaparse';
+
+const styles = {
+  csvReader: {
+    display: 'flex',
+    flexDirection: 'row',
+    marginBottom: 10,
+  } as CSSProperties,
+  browseFile: {
+    width: '20%',
+  } as CSSProperties,
+  acceptedFile: {
+    border: '1px solid #ccc',
+    height: 45,
+    lineHeight: 2.5,
+    paddingLeft: 10,
+    width: '80%',
+  } as CSSProperties,
+  remove: {
+    borderRadius: 0,
+    padding: '0 20px',
+  } as CSSProperties,
+  progressBarBackgroundColor: {
+    backgroundColor: 'red',
+  } as CSSProperties,
+};
+
+export default function CSVReader() {
+  const { CSVReader } = useCSVReader();
+
+  return (
+    <CSVReader
+      onUploadAccepted={(results: any) => {
+        console.log('---------------------------');
+        console.log(results);
+        console.log('---------------------------');
+      }}
+    >
+      {({
+        getRootProps,
+        acceptedFile,
+        ProgressBar,
+        getRemoveFileProps,
+      }: any) => (
+        <>
+          <div style={styles.csvReader}>
+            <button type='button' {...getRootProps()} style={styles.browseFile}>
               Browse file
             </button>
-            <div
-              style={{
-                borderWidth: 1,
-                borderStyle: 'solid',
-                borderColor: '#ccc',
-                height: 45,
-                lineHeight: 2.5,
-                marginTop: 5,
-                marginBottom: 5,
-                paddingLeft: 13,
-                paddingTop: 3,
-                width: '60%'
-              }}
-            >
-              {file && file.name}
+            <div style={styles.acceptedFile}>
+              {acceptedFile && acceptedFile.name}
             </div>
-            <button
-              style={{
-                borderRadius: 0,
-                marginLeft: 0,
-                marginRight: 0,
-                paddingLeft: 20,
-                paddingRight: 20
-              }}
-              onClick={this.handleRemoveFile}
-            >
+            <button {...getRemoveFileProps()} style={styles.remove}>
               Remove
             </button>
-          </aside>
-        )}
-      </CSVReader>
-    )
-  }
+          </div>
+          <ProgressBar style={styles.progressBarBackgroundColor} />
+        </>
+      )}
+    </CSVReader>
+  );
 }
 ```
 
@@ -176,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 (
-      <CSVReader
-        onDrop={this.handleOnDrop}
-        onError={this.handleOnError}
-        addRemoveButton
-        removeButtonColor='#659cef'
-        onRemoveFile={this.handleOnRemoveFile}
-      >
-        <span>Drop CSV file here or click to upload.</span>
-      </CSVReader>
-    )
-  }
+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 (
+    <CSVReader
+      onUploadAccepted={(results: any) => {
+        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) => (
+        <>
+          <div
+            {...getRootProps()}
+            style={Object.assign(
+              {},
+              styles.zone,
+              zoneHover && styles.zoneHover
+            )}
+          >
+            {acceptedFile ? (
+              <>
+                <div style={styles.file}>
+                  <div style={styles.info}>
+                    <span style={styles.size}>
+                      {formatFileSize(acceptedFile.size)}
+                    </span>
+                    <span style={styles.name}>{acceptedFile.name}</span>
+                  </div>
+                  <div style={styles.progressBar}>
+                    <ProgressBar />
+                  </div>
+                  <div
+                    {...getRemoveFileProps()}
+                    style={styles.remove}
+                    onMouseOver={(event: Event) => {
+                      event.preventDefault();
+                      setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
+                    }}
+                    onMouseOut={(event: Event) => {
+                      event.preventDefault();
+                      setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
+                    }}
+                  >
+                    <Remove color={removeHoverColor} />
+                  </div>
+                </div>
+              </>
+            ) : (
+              'Drop CSV file here or click to upload'
+            )}
+          </div>
+        </>
+      )}
+    </CSVReader>
+  );
 }
 ```
 
@@ -218,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 (
-      <CSVReader
-        onDrop={this.handleOnDrop}
-        onError={this.handleOnError}
-        noClick
-        addRemoveButton
-        onRemoveFile={this.handleOnRemoveFile}
-      >
-        <span>Drop CSV file here to upload.</span>
-      </CSVReader>
-    )
-  }
+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 (
+    <CSVReader
+      onUploadAccepted={(results: any) => {
+        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) => (
+        <>
+          <div
+            {...getRootProps()}
+            style={Object.assign(
+              {},
+              styles.zone,
+              zoneHover && styles.zoneHover
+            )}
+          >
+            {acceptedFile ? (
+              <>
+                <div style={styles.file}>
+                  <div style={styles.info}>
+                    <span style={styles.size}>
+                      {formatFileSize(acceptedFile.size)}
+                    </span>
+                    <span style={styles.name}>{acceptedFile.name}</span>
+                  </div>
+                  <div style={styles.progressBar}>
+                    <ProgressBar />
+                  </div>
+                  <div
+                    {...getRemoveFileProps()}
+                    style={styles.remove}
+                    onMouseOver={(event: Event) => {
+                      event.preventDefault();
+                      setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
+                    }}
+                    onMouseOut={(event: Event) => {
+                      event.preventDefault();
+                      setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
+                    }}
+                  >
+                    <Remove color={removeHoverColor} />
+                  </div>
+                </div>
+              </>
+            ) : (
+              'Drop CSV file here to upload'
+            )}
+          </div>
+        </>
+      )}
+    </CSVReader>
+  );
 }
 ```
 
@@ -260,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 (
-      <CSVReader
-        onDrop={this.handleOnDrop}
-        onError={this.handleOnError}
-        noDrag
-        addRemoveButton
-        onRemoveFile={this.handleOnRemoveFile}
-      >
-        <span>Click to upload.</span>
-      </CSVReader>
-    )
-  }
+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 (
+    <CSVReader
+      onUploadAccepted={(results: any) => {
+        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) => (
+        <>
+          <div
+            {...getRootProps()}
+            style={Object.assign(
+              {},
+              styles.zone,
+              zoneHover && styles.zoneHover
+            )}
+          >
+            {acceptedFile ? (
+              <>
+                <div style={styles.file}>
+                  <div style={styles.info}>
+                    <span style={styles.size}>
+                      {formatFileSize(acceptedFile.size)}
+                    </span>
+                    <span style={styles.name}>{acceptedFile.name}</span>
+                  </div>
+                  <div style={styles.progressBar}>
+                    <ProgressBar />
+                  </div>
+                  <div
+                    {...getRemoveFileProps()}
+                    style={styles.remove}
+                    onMouseOver={(event: Event) => {
+                      event.preventDefault();
+                      setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
+                    }}
+                    onMouseOut={(event: Event) => {
+                      event.preventDefault();
+                      setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
+                    }}
+                  >
+                    <Remove color={removeHoverColor} />
+                  </div>
+                </div>
+              </>
+            ) : (
+              'Click to upload'
+            )}
+          </div>
+        </>
+      )}
+    </CSVReader>
+  );
 }
 ```
 
@@ -306,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 (
-      <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'}
-        bom={true}
-      >
-        Download
-      </CSVDownloader>
-    )
-  }
+import React from 'react';
+
+import { useCSVDownloader } from 'react-papaparse';
+
+export default function CSVDownloader() {
+  const { CSVDownloader, Type } = useCSVDownloader();
+
+  return (
+    <CSVDownloader
+      type={Type.Button}
+      filename={'filename'}
+      bom={true}
+      config={{
+        delimiter: ';',
+      }}
+      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,
+        },
+      ]}
+    >
+      Download
+    </CSVDownloader>
+  );
 }
 ```
 
 #### Link
 
 ```javascript
-import React, { Component } from 'react'
+import React from 'react';
 
-import { CSVDownloader } from 'react-papaparse'
+import { useCSVDownloader } from 'react-papaparse';
 
-export default class CSVDownloader extends Component {
-  render() {
-    return (
-      <CSVDownloader
-        data={`Column 1,Column 2,Column 3,Column 4
+export default function CSVDownloader() {
+  const { CSVDownloader, Type } = useCSVDownloader();
+
+  return (
+    <CSVDownloader
+      type={Type.Link}
+      filename={'filename'}
+      bom={true}
+      data={`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
+#2-1,मुकेश,ខ្ញុំ,2-4
+3-1,3-2,អ្នក,3-4
 4,5,6,7`}
-        filename={'filename'}
-        type={'link'}
-      >
-        Download
-      </CSVDownloader>
-    )
-  }
+    >
+      Download
+    </CSVDownloader>
+  );
 }
 ```
 
@@ -382,104 +716,153 @@ export default class CSVDownloader extends Component {
 `data={}` can be a function that returns a data object.
 
 ```javascript
-<CSVDownloader
-  filename={'filename'}
-  data={() => {
-    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 (
+    <CSVDownloader
+      filename={'filename'}
+      data={() => {
+        return [
+          {
+            "Column 1": "1-1",
+            "Column 2": "1-2",
+            "Column 3": "1-3",
+            "Column 4": "1-4",
+          }
+        ]}
       }
-    ]}
-  }
->
-  Download
-</CSVDownloader>
+    >
+      Download
+    </CSVDownloader>
+  );
+}
 ```
 
 ### 🎀 readString
 
 ```javascript
-import { readString } from 'react-papaparse'
+import React from 'react';
 
-const csvString = `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`
-
-readString(csvString, {
-  worker: true,
-  complete: (results) => {
-    console.log(results)
-  }
-})
+4,5,6,7`;
+
+    readString(csvString, {
+      worker: true,
+      complete: (results) => {
+        console.log('---------------------------');
+        console.log(results);
+        console.log('---------------------------');
+      },
+    });
+  };
+
+  return <button onClick={() => handleReadString()}>readString</button>;
+}
 ```
 
 ### 🎀 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 <button onClick={() => handleReadRemoteFile()}>readRemoteFile</button>;
+}
 ```
 
 ### 🎀 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 <button onClick={() => handleJsonToCSV()}>jsonToCSV</button>;
+}
 ```
 
-#### 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
+import { usePapaParse } from 'react-papaparse';
+
+const { readString } = usePapaParse();
+
 readString(csvString, {
   header: true,
   worker: true,
   complete: (results) => {
-    console.log(results)
-  }
-})
+    console.log('---------------------------');
+    console.log(results);
+    console.log('---------------------------');
+  },
+});
 ```
 
 #### Stream
@@ -487,30 +870,33 @@ 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.18.2 (2022-01-04):
+Latest version 4.0.0 (2022-01-17):
 
-  * Fix breaking change with webpack 5
+  * 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.0.x
+### 🆕 v4.1.x
 
-  * Improve code performance
-  * Rewrite any existing based components to hooks
   * CSVReader multiple files drag and drop
 
 ## ❗ Issues
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 (
-      <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'}
-      >
-        Download
-      </CSVDownloader>
-    );
-  }
-}
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 (
-      <CSVDownloader
-        data={`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`}
-        filename={'filename'}
-        type={'link'}
-      >
-        Download
-      </CSVDownloader>
-    );
-  }
-}
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 (
-      <>
-        <h5>Basic Upload</h5>
-        <CSVReader
-          ref={buttonRef}
-          onFileLoad={this.handleOnFileLoad}
-          onError={this.handleOnError}
-          noClick
-          noDrag
-          onRemoveFile={this.handleOnRemoveFile}
-        >
-          {({ file }) => (
-            <aside
-              style={{
-                display: 'flex',
-                flexDirection: 'row',
-                marginBottom: 10,
-              }}
-            >
-              <button
-                type="button"
-                onClick={this.handleOpenDialog}
-                style={{
-                  borderRadius: 0,
-                  marginLeft: 0,
-                  marginRight: 0,
-                  width: '40%',
-                  paddingLeft: 0,
-                  paddingRight: 0,
-                }}
-              >
-                Browse file
-              </button>
-              <div
-                style={{
-                  borderWidth: 1,
-                  borderStyle: 'solid',
-                  borderColor: '#ccc',
-                  height: 45,
-                  lineHeight: 2.5,
-                  marginTop: 5,
-                  marginBottom: 5,
-                  paddingLeft: 13,
-                  paddingTop: 3,
-                  width: '60%',
-                }}
-              >
-                {file && file.name}
-              </div>
-              <button
-                style={{
-                  borderRadius: 0,
-                  marginLeft: 0,
-                  marginRight: 0,
-                  paddingLeft: 20,
-                  paddingRight: 20,
-                }}
-                onClick={this.handleRemoveFile}
-              >
-                Remove
-              </button>
-            </aside>
-          )}
-        </CSVReader>
-      </>
-    );
-  }
-}
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 (
-      <>
-        <h5>Click and Drag Upload</h5>
-        <CSVReader
-          onDrop={this.handleOnDrop}
-          onError={this.handleOnError}
-          addRemoveButton
-          onRemoveFile={this.handleOnRemoveFile}
-        >
-          <span>Drop CSV file here or click to upload.</span>
-        </CSVReader>
-      </>
-    );
-  }
-}
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 (
-      <>
-        <h5>Drag ( No Click ) Upload</h5>
-        <CSVReader
-          onDrop={this.handleOnDrop}
-          onError={this.handleOnError}
-          noClick
-          addRemoveButton
-          onRemoveFile={this.handleOnRemoveFile}
-        >
-          <span>Drop CSV file here to upload.</span>
-        </CSVReader>
-      </>
-    );
-  }
-}
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 (
-      <>
-        <h5>Click ( No Drag ) Upload</h5>
-        <CSVReader
-          onDrop={this.handleOnDrop}
-          onError={this.handleOnError}
-          noDrag
-          addRemoveButton
-          onRemoveFile={this.handleOnRemoveFile}
-        >
-          <span>Click to upload.</span>
-        </CSVReader>
-      </>
-    );
-  }
-}
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 <button onClick={this.handleClick}>jsonToCSV</button>;
-  }
-}
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 <button onClick={this.handleClick}>readRemoteFile</button>;
-  }
-}
diff --git a/docs/package.json b/docs/package.json
index e275ef0..bd5cc99 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.18.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-papaparse": "file:..",
     "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 {
           <link rel="apple-touch-icon" href="" />
           <link rel="shortcut icon" type="image/x-icon" href="" />
 
-          {/* ====== SEO ======= */}
+          {/* == SEO == */}
           <meta
             name="description"
             content="The fastest in-browser CSV (or delimited text) parser for React."
@@ -54,7 +56,7 @@ class CustomApp extends App {
             name="viewport"
             content="width=device-width, initial-scale=1.0"
           />
-          {/* ================== */}
+          {/* ========= */}
 
           <link
             rel="stylesheet"
@@ -147,7 +149,7 @@ class CustomApp extends App {
                 react-papaparse by{' '}
                 <a href="https://github.com/bunlong">Bunlong</a>
                 <br />
-                &copy; 2018-2021
+                &copy; 2018-2022
               </div>
 
               <div className="grid-15 mobile-grid-50 links">
@@ -165,7 +167,6 @@ class CustomApp extends App {
             </div>
           </div>
         </footer>
-        <script type="text/javascript" src="/static/js/prism.js" />
       </div>
     );
   }
diff --git a/docs/pages/demo.js b/docs/pages/demo.js
index 4f86569..71cdc29 100644
--- a/docs/pages/demo.js
+++ b/docs/pages/demo.js
@@ -1,17 +1,22 @@
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
 import dynamic from 'next/dynamic';
+import Prism from 'prismjs';
 
 const DynamicComponentWithNoSSR = dynamic(
   () => import('../src/components/screens/Demo'),
   { ssr: false },
 );
 
-export default class Demo extends Component {
-  render() {
-    return (
-      <>
-        <DynamicComponentWithNoSSR />
-      </>
-    );
-  }
-}
+const Demo = () => {
+  useEffect(() => {
+    Prism.highlightAll();
+  }, []);
+
+  return (
+    <>
+      <DynamicComponentWithNoSSR />
+    </>
+  );
+};
+
+export default Demo;
diff --git a/docs/pages/docs.js b/docs/pages/docs.js
index 02b8c77..a947a2b 100644
--- a/docs/pages/docs.js
+++ b/docs/pages/docs.js
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import Prism from 'prismjs';
 
 import Navbar from '../src/components/screens/docs/Navbar';
 import Documentation from '../src/components/screens/docs/Documentation';
@@ -10,6 +11,10 @@ import Extra from '../src/components/screens/docs/Extra';
 import CSVDownloader from '../src/components/screens/docs/CSVDownloader';
 
 const Docs = () => {
+  useEffect(() => {
+    Prism.highlightAll();
+  }, []);
+
   return (
     <main>
       <Navbar />
diff --git a/docs/pages/index.js b/docs/pages/index.js
index 5c02407..b73ef39 100644
--- a/docs/pages/index.js
+++ b/docs/pages/index.js
@@ -1,4 +1,6 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import Prism from 'prismjs';
+
 import Welcome from '../src/components/screens/indexes/Welcome';
 import Navbar from '../src/components/screens/indexes/Navbar';
 import Feature from '../src/components/screens/indexes/Feature';
@@ -19,6 +21,10 @@ import CSVDownloader from '../src/components/screens/indexes/CSVDownloader';
 import Download from '../src/components/screens/indexes/Download';
 
 const Index = () => {
+  useEffect(() => {
+    Prism.highlightAll();
+  }, []);
+
   return (
     <>
       <Welcome />
diff --git a/docs/src/components/screens/Demo.js b/docs/src/components/screens/Demo.js
index f6ea303..6f819dd 100644
--- a/docs/src/components/screens/Demo.js
+++ b/docs/src/components/screens/Demo.js
@@ -1,3 +1,665 @@
+import React, { useState } from 'react';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+
+import { usePapaParse, useCSVReader, lightenDarkenColor, formatFileSize } from 'react-papaparse';
+
+// const BASE_URL = 'https://github.com/Bunlong/react-papaparse/blob/master';
+const BASE_URL = 'https://github.com/Bunlong/react-papaparse/blob/v4.0.0/examples';
+
+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 buttonStyles = {
+  csvReader: {
+    display: 'flex',
+    flexDirection: 'row',
+    marginBottom: 10,
+  },
+  browseFile: {
+    borderRadius: 0,
+    marginLeft: 0,
+    marginRight: 0,
+    width: '40%',
+  },
+  acceptedFile: {
+    border: '1px solid rgb(204, 204, 204)',
+    height: 45,
+    lineHeight: 2.5,
+    margin: '5px 0 5px 0',
+    padding: '3px 0 0 13px',
+    width: '60%',
+  },
+  remove: {
+    borderRadius: 0,
+    marginLeft: 0,
+    marginRight: 0,
+    padding: '0 20px',
+  },
+  progressBarBackgroundColor: {
+    backgroundColor: 'red',
+  },
+};
+
+const dragStyles = {
+  zone: {
+    alignItems: 'center',
+    border: `2px dashed ${GREY}`,
+    borderRadius: 20,
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    justifyContent: 'center',
+    padding: 20,
+  },
+  file: {
+    background: 'linear-gradient(to bottom, #EEE, #DDD)',
+    borderRadius: 20,
+    display: 'flex',
+    height: 120,
+    width: 120,
+    position: 'relative',
+    zIndex: 10,
+    flexDirection: 'column',
+    justifyContent: 'center',
+  },
+  info: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    paddingLeft: 10,
+    paddingRight: 10,
+  },
+  size: {
+    backgroundColor: GREY_LIGHT,
+    borderRadius: 3,
+    marginBottom: '0.5em',
+    justifyContent: 'center',
+    display: 'flex',
+  },
+  name: {
+    backgroundColor: GREY_LIGHT,
+    borderRadius: 3,
+    fontSize: 12,
+    marginBottom: '0.5em',
+  },
+  progressBar: {
+    bottom: 14,
+    position: 'absolute',
+    width: '85%',
+    paddingLeft: 10,
+    paddingRight: 10,
+  },
+  zoneHover: {
+    borderColor: GREY_DIM,
+  },
+  default: {
+    borderColor: GREY,
+  },
+  remove: {
+    height: 23,
+    position: 'absolute',
+    right: 6,
+    top: 6,
+    width: 23,
+  },
+};
+
+export default function Demo() {
+  const [tabIndex, setTabIndex] = useState(0);
+
+  const { readString, readRemoteFile, jsonToCSV } = usePapaParse();
+  const [str, setStr] = useState(`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 [csvData, setCsvData] = useState(null);
+  const { CSVReader } = useCSVReader();
+  const { CSVReader: CSVReader1 } = useCSVReader();
+  const { CSVReader: CSVReader2 } = useCSVReader();
+  const { CSVReader: CSVReader3 } = useCSVReader();
+
+  const [zoneHover1, setZoneHover1] = useState(false);
+  const [removeHoverColor1, setRemoveHoverColor1] = useState(
+    DEFAULT_REMOVE_HOVER_COLOR
+  );
+
+  const [zoneHover2, setZoneHover2] = useState(false);
+  const [removeHoverColor2, setRemoveHoverColor2] = useState(
+    DEFAULT_REMOVE_HOVER_COLOR
+  );
+
+  const [zoneHover3, setZoneHover3] = useState(false);
+  const [removeHoverColor3, setRemoveHoverColor3] = useState(
+    DEFAULT_REMOVE_HOVER_COLOR
+  );
+
+  const [url, setUrl] = useState('');
+  const [jsonData, setJsonData] = useState(`[
+  {
+    "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 handleSelect = (index) => {
+    setTabIndex(index);
+  };
+
+  const handleStrChange = (e) => {
+    setStr(e.target.value);
+  };
+
+  const handleImportOffer = () => {
+    if (tabIndex === 0) {
+      readString(str, {
+        worker: true,
+        complete: (results) => {
+          console.log('---------------------------');
+          console.log(results);
+          console.log('---------------------------');
+        },
+      });
+    } else if (tabIndex === 1) {
+      console.log('---------------------------');
+      console.log(csvData);
+      console.log('---------------------------');
+    } else if (tabIndex === 2) {
+      if (url === '') {
+        // eslint-disable-next-line no-undef
+        alert('Please enter the URL of a file to download and parse.');
+        return;
+      }
+      console.log('Running!');
+      readRemoteFile(url, {
+        complete: (results) => {
+          console.log('---------------------------');
+          console.log('Parse complete!');
+          console.log('Row count: ', results.data.length);
+          console.log('Errors: ', results.errors.length);
+          console.log('Results: ', results);
+          console.log('---------------------------');
+        },
+      });
+    } else {
+      try {
+        const results = jsonToCSV(jsonData);
+        console.log('---------------------------');
+        console.log(results);
+        console.log('---------------------------');
+      } catch (e) {
+        // eslint-disable-next-line no-undef
+        alert('Please enter valid JSON.');
+      }
+    }
+  }
+
+  const handleURLChange = (event) => {
+    setUrl(event.target.value);
+  };
+
+  const setURL = (url) => {
+    setUrl(url);
+  };
+
+  const handleJsonDataChange = (event) => {
+    setJsonData(event.target.value);
+  }
+
+  return (
+    <>
+      <main>
+        <header>
+          <div className="grid-container">
+            <div className="grid-40 mobile-grid-50">
+              <div className="links">
+                <a href="/">
+                  <i className="fa fa-home fa-lg" /> Home
+                </a>
+                <a href="/demo">
+                  <i className="fa fa-magic fa-lg" /> Demo
+                </a>
+                <a href="/docs">
+                  <i className="fa fa-book fa-lg" /> Docs
+                </a>
+              </div>
+            </div>
+            <div className="grid-20 hide-on-mobile text-center">
+              <a href="/" className="text-logo">
+                react-papaparse 4
+              </a>
+            </div>
+            <div className="grid-40 mobile-grid-50 text-right">
+              <div className="links">
+                <a href="https://github.com/Bunlong/react-papaparse">
+                  <i className="fa fa-github fa-lg" /> GitHub
+                </a>
+              </div>
+            </div>
+          </div>
+        </header>
+
+        <h1>Choose a Demo</h1>
+
+        <div className="grid-container">
+          <div className="grid-66">
+            <Tabs onSelect={(index) => handleSelect(index)}>
+              <TabList>
+                <Tab>String</Tab>
+                <Tab>Local File(s)</Tab>
+                <Tab>Remote File</Tab>
+                <Tab>JSON to CSV</Tab>
+              </TabList>
+              <TabPanel>
+                <div className="input-area" id="input-string">
+                  <div style={{ marginBottom: 14, textAlignLast: 'end' }}>
+                    <a href={`${BASE_URL}/readString.tsx`}>
+                      Source code
+                    </a>
+                  </div>
+                  <textarea
+                    id="input"
+                    placeholder="String input"
+                    onChange={(event) => handleStrChange(event)}
+                    value={str}
+                  />
+                </div>
+              </TabPanel>
+              <TabPanel>
+                <div className="input-area" id="input-string">
+                  <div className="text-center">
+                    Choose one or more delimited text files for
+                    react-papaparse to parse.
+                  </div>
+                  <div style={{ marginTop: 60, marginBottom: 46 }}>
+                    <h5>Basic Upload</h5>
+                    <div style={{ marginBottom: 14, textAlignLast: 'end' }}>
+                      <a href={`${BASE_URL}/CSVReaderBasicUpload.tsx`}>
+                        Source code
+                      </a>
+                    </div>
+                    <CSVReader
+                      onUploadAccepted={(results)=> {
+                        setCsvData(results);
+                      }}
+                    >
+                      {({ getRootProps, acceptedFile, ProgressBar, getRemoveFileProps }) => (
+                        <>
+                          <div style={buttonStyles.csvReader}>
+                            <button
+                              type="button"
+                              {...getRootProps()}
+                              style={buttonStyles.browseFile}
+                            >
+                              Browse file
+                            </button>
+                            <div style={buttonStyles.acceptedFile}>
+                              {acceptedFile && acceptedFile.name}
+                            </div>
+                            <button
+                              {...getRemoveFileProps()}
+                              style={buttonStyles.remove}
+                              className="button red"
+                            >
+                              Remove
+                            </button>
+                          </div>
+                          <ProgressBar style={buttonStyles.progressBarBackgroundColor} />
+                        </>
+                      )}
+                    </CSVReader>
+                  </div>
+                  <div style={{ marginTop: 50, marginBottom: 46 }}>
+                    <h5>Click and Drag Upload</h5>
+                    <div style={{ marginBottom: 14, textAlignLast: 'end' }}>
+                      <a href={`${BASE_URL}/CSVReaderClickAndDragUpload.tsx`}>
+                        Source code
+                      </a>
+                    </div>
+                    <CSVReader1
+                      onUploadAccepted={(results) => {
+                        setCsvData(results);
+                        setZoneHover1(false);
+                      }}
+                      onDragOver={(event) => {
+                        event.preventDefault();
+                        setZoneHover1(true);
+                      }}
+                      onDragLeave={(event) => {
+                        event.preventDefault();
+                        setZoneHover1(false);
+                      }}
+                    >
+                      {({
+                        getRootProps,
+                        acceptedFile,
+                        ProgressBar,
+                        getRemoveFileProps,
+                        Remove,
+                      }) => (
+                        <>
+                          <div
+                            {...getRootProps()}
+                            style={Object.assign(
+                              {},
+                              dragStyles.zone,
+                              zoneHover1 && dragStyles.zoneHover
+                            )}
+                          >
+                            {acceptedFile ? (
+                              <>
+                                <div style={dragStyles.file}>
+                                  <div style={dragStyles.info}>
+                                    <span style={dragStyles.size}>
+                                      {formatFileSize(acceptedFile.size)}
+                                    </span>
+                                    <span style={dragStyles.name}>{acceptedFile.name}</span>
+                                  </div>
+                                  <div style={dragStyles.progressBar}>
+                                    <ProgressBar />
+                                  </div>
+                                  <div
+                                    {...getRemoveFileProps()}
+                                    style={dragStyles.remove}
+                                    onMouseOver={(event) => {
+                                      event.preventDefault();
+                                      setRemoveHoverColor1(REMOVE_HOVER_COLOR_LIGHT);
+                                    }}
+                                    onMouseOut={(event) => {
+                                      event.preventDefault();
+                                      setRemoveHoverColor1(DEFAULT_REMOVE_HOVER_COLOR);
+                                    }}
+                                  >
+                                    <Remove color={removeHoverColor1} />
+                                  </div>
+                                </div>
+                              </>
+                            ) : (
+                              'Drop CSV file here or click to upload'
+                            )}
+                          </div>
+                        </>
+                      )}
+                    </CSVReader1>
+                  </div>
+                  <div style={{ marginTop: 50, marginBottom: 46 }}>
+                    <h5>DRAG ( NO CLICK ) UPLOAD</h5>
+                    <div style={{ marginBottom: 14, textAlignLast: 'end' }}>
+                      <a href={`${BASE_URL}/CSVReaderDragNoClickUpload.tsx`}>
+                        Source code
+                      </a>
+                    </div>
+                    <CSVReader2
+                      onUploadAccepted={(results) => {
+                        setCsvData(results);
+                        setZoneHover2(false);
+                      }}
+                      onDragOver={(event) => {
+                        event.preventDefault();
+                        setZoneHover2(true);
+                      }}
+                      onDragLeave={(event) => {
+                        event.preventDefault();
+                        setZoneHover2(false);
+                      }}
+                      noClick
+                    >
+                      {({
+                        getRootProps,
+                        acceptedFile,
+                        ProgressBar,
+                        getRemoveFileProps,
+                        Remove,
+                      }) => (
+                        <>
+                          <div
+                            {...getRootProps()}
+                            style={Object.assign(
+                              {},
+                              dragStyles.zone,
+                              zoneHover2 && dragStyles.zoneHover
+                            )}
+                          >
+                            {acceptedFile ? (
+                              <>
+                                <div style={dragStyles.file}>
+                                  <div style={dragStyles.info}>
+                                    <span style={dragStyles.size}>
+                                      {formatFileSize(acceptedFile.size)}
+                                    </span>
+                                    <span style={dragStyles.name}>{acceptedFile.name}</span>
+                                  </div>
+                                  <div style={dragStyles.progressBar}>
+                                    <ProgressBar />
+                                  </div>
+                                  <div
+                                    {...getRemoveFileProps()}
+                                    style={dragStyles.remove}
+                                    onMouseOver={(event) => {
+                                      event.preventDefault();
+                                      setRemoveHoverColor2(REMOVE_HOVER_COLOR_LIGHT);
+                                    }}
+                                    onMouseOut={(event) => {
+                                      event.preventDefault();
+                                      setRemoveHoverColor2(DEFAULT_REMOVE_HOVER_COLOR);
+                                    }}
+                                  >
+                                    <Remove color={removeHoverColor2} />
+                                  </div>
+                                </div>
+                              </>
+                            ) : (
+                              'Drop CSV file here to upload'
+                            )}
+                          </div>
+                        </>
+                      )}
+                    </CSVReader2>
+                  </div>
+                  <div style={{ marginTop: 50, marginBottom: 46 }}>
+                    <h5>CLICK ( NO DRAG ) UPLOAD</h5>
+                    <div style={{ marginBottom: 14, textAlignLast: 'end' }}>
+                      <a href={`${BASE_URL}/CSVReaderClickNoDragUpload.tsx`}>
+                        Source code
+                      </a>
+                    </div>
+                    <CSVReader3
+                      onUploadAccepted={(results) => {
+                        setCsvData(results);
+                        setZoneHover3(false);
+                      }}
+                      onDragOver={(event) => {
+                        event.preventDefault();
+                        setZoneHover3(true);
+                      }}
+                      onDragLeave={(event) => {
+                        event.preventDefault();
+                        setZoneHover3(false);
+                      }}
+                      noDrag
+                    >
+                      {({
+                        getRootProps,
+                        acceptedFile,
+                        ProgressBar,
+                        getRemoveFileProps,
+                        Remove,
+                      }) => (
+                        <>
+                          <div
+                            {...getRootProps()}
+                            style={Object.assign(
+                              {},
+                              dragStyles.zone,
+                              zoneHover3 && dragStyles.zoneHover
+                            )}
+                          >
+                            {acceptedFile ? (
+                              <>
+                                <div style={dragStyles.file}>
+                                  <div style={dragStyles.info}>
+                                    <span style={dragStyles.size}>
+                                      {formatFileSize(acceptedFile.size)}
+                                    </span>
+                                    <span style={dragStyles.name}>{acceptedFile.name}</span>
+                                  </div>
+                                  <div style={dragStyles.progressBar}>
+                                    <ProgressBar />
+                                  </div>
+                                  <div
+                                    {...getRemoveFileProps()}
+                                    style={dragStyles.remove}
+                                    onMouseOver={(event) => {
+                                      event.preventDefault();
+                                      setRemoveHoverColor3(REMOVE_HOVER_COLOR_LIGHT);
+                                    }}
+                                    onMouseOut={(event) => {
+                                      event.preventDefault();
+                                      setRemoveHoverColor3(DEFAULT_REMOVE_HOVER_COLOR);
+                                    }}
+                                  >
+                                    <Remove color={removeHoverColor3} />
+                                  </div>
+                                </div>
+                              </>
+                            ) : (
+                              'Click to upload'
+                            )}
+                          </div>
+                        </>
+                      )}
+                    </CSVReader3>
+                  </div>
+                </div>
+              </TabPanel>
+              <TabPanel>
+                <div className="input-area" id="input-string">
+                  <div style={{ marginBottom: 14, textAlignLast: 'end' }}>
+                    <a href={`${BASE_URL/readRemoteFile.tsx}`}>
+                      Source code
+                    </a>
+                  </div>
+                  <div>
+                    <div className="text-center">
+                      Type the URL of the file to be downloaded and parsed.
+                      <br />
+                      <small>
+                        (cross-origin requests require
+                        Access-Control-Allow-Origin header)
+                      </small>
+                    </div>
+                    <input
+                      type="text"
+                      id="url"
+                      placeholder="URL"
+                      value={url}
+                      onChange={(event) => handleURLChange(event)}
+                    />
+                    Sample remote files:
+                    <ul>
+                      <li>
+                        <a
+                          id="local-normal-file"
+                          onClick={() =>
+                            setURL('/static/csv/normal.csv')
+                          }
+                          style={{ cursor: 'pointer' }}
+                        >
+                          Normal file
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          id="local-large-file"
+                          onClick={() => setURL('/static/csv/big.csv')}
+                          style={{ cursor: 'pointer' }}
+                        >
+                          Large file
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          id="local-malformed-file"
+                          onClick={() =>
+                            setURL('/static/csv/malformed.csv')
+                          }
+                          style={{ cursor: 'pointer' }}
+                        >
+                          Malformed file
+                        </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </TabPanel>
+              <TabPanel>
+                <div className="input-area" id="input-string">
+                  <div style={{ float: 'right', marginBottom: 14 }}>
+                    <a href={`${BASE_URL}/jsonToCSV.tsx`}>
+                      Source code
+                    </a>
+                  </div>
+                  <textarea
+                    id="json"
+                    placeholder="JSON string"
+                    value={jsonData}
+                    onChange={(event) => handleJsonDataChange(event)}
+                  />
+                </div>
+              </TabPanel>
+            </Tabs>
+            <div className="text-center">
+              <div className="see-results">
+                Results will appear in the console of your browser's inspector
+                tools
+              </div>
+              <button
+                id="submit"
+                className="green"
+                onClick={() => handleImportOffer()}
+              >
+                Parse
+              </button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}
+
+
+// ================================
+
+/*
+
 import React, { Component } from 'react';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import {
@@ -62,7 +724,7 @@ export default class Demo extends Component {
           console.log('Errors: ', results.errors.length);
           console.log('Results: ', results);
           console.log('---------------------------');
-        }
+        },
       });
     } else if (index === 1) {
       const results = this.state.csvData;
@@ -465,3 +1127,5 @@ export default class Demo extends Component {
     );
   }
 }
+
+*/
diff --git a/docs/src/components/screens/docs/CSVDownloader.js b/docs/src/components/screens/docs/CSVDownloader.js
index d2e2124..bcd3548 100644
--- a/docs/src/components/screens/docs/CSVDownloader.js
+++ b/docs/src/components/screens/docs/CSVDownloader.js
@@ -15,6 +15,14 @@ const CSVDownloader = () => {
           <pre>
             <code className="language-javascript">
               {`<CSVDownloader
+  type={Type.Button}
+  filename={'filename'}
+  bom={true}
+  config={
+    {
+      delimiter: ';',
+    }
+  }
   data={[
     {
       "Column 1": "1-1",
@@ -23,10 +31,6 @@ const CSVDownloader = () => {
       "Column 4": "1-4",
     },
   ]}
-  type="button"
-  filename={'filename'}
-  bom={true}
-  config={{}}
 >
   Download
 </CSVDownloader>
@@ -36,7 +40,7 @@ const CSVDownloader = () => {
           <span
             style={{ float: 'right', marginBottom: 14, textAlignLast: 'end' }}
           >
-            <a href="https://github.com/Bunlong/react-papaparse/blob/master/demo/CSVDownloader1.js">
+            <a href="https://github.com/Bunlong/react-papaparse/blob/v4.0.0/examples/CSVDownloader.tsx">
               Source code
             </a>
           </span>
diff --git a/docs/src/components/screens/docs/CSVToJSON.js b/docs/src/components/screens/docs/CSVToJSON.js
index 9bb0bbf..e3cbb4f 100644
--- a/docs/src/components/screens/docs/CSVToJSON.js
+++ b/docs/src/components/screens/docs/CSVToJSON.js
@@ -26,6 +26,13 @@ const CSVToJSON = () => {
               )
             </code>
           </pre>
+          <span
+            style={{ float: 'right', marginBottom: 14, textAlignLast: 'end' }}
+          >
+            <a href="https://github.com/Bunlong/react-papaparse/blob/v4.0.0/examples/readString.tsx">
+              Source code
+            </a>
+          </span>
         </div>
         <div className="grid-50">
           <ul>
@@ -33,11 +40,11 @@ const CSVToJSON = () => {
               <code>csvString</code> is a string of delimited text to be parsed.
             </li>
             <li>
-              <code>config</code> is an optional{' '}
+              <code>config</code> is an {' '}
               <a href="#config">config object</a>.
             </li>
             <li>
-              Returns a <a href="#results">parse results</a> object (if not
+              Returns a <a href="#results">parse results</a> object in <code>complete</code> of config object (if not
               streaming or using worker).
             </li>
           </ul>
@@ -57,37 +64,40 @@ const CSVToJSON = () => {
           <pre>
             <code className="language-javascript">
               {`<CSVReader
-  ref={buttonRef}
-  onFileLoad={this.handleOnDrop}
-  onError={this.handleOnError}
-  noClick
-  noDrag
-  config={{}}
-  style={{}}
-  onRemoveFile={this.handleOnRemoveFile}
-  >
-  {({ file }) => (
-    <aside>
-      <button
-        type='button'
-        onClick={this.handleOpenDialog}
-      >
-          Browe file
-      </button>
-      <div>
-        {file && file.name}
+  onUploadAccepted={(results: any) => {
+    console.log('---------------------------');
+    console.log(results);
+    console.log('---------------------------');
+  }}
+>
+  {({
+    getRootProps,
+    acceptedFile,
+    ProgressBar,
+    getRemoveFileProps,
+  }: any) => (
+    <>
+      <div style={styles.csvReader}>
+        <button type='button' {...getRootProps()} style={styles.browseFile}>
+          Browse file
+        </button>
+        <div style={styles.acceptedFile}>
+          {acceptedFile && acceptedFile.name}
+        </div>
+        <button {...getRemoveFileProps()} style={styles.remove}>
+          Remove
+        </button>
       </div>
-      <button onClick={this.handleRemoveFile}>Remove</button>
-    </aside>
+      <ProgressBar style={styles.progressBarBackgroundColor} />
+    </>
   )}
-</CSVReader>
-`}
+</CSVReader>`}
             </code>
           </pre>
           <span
             style={{ float: 'right', marginBottom: 14, textAlignLast: 'end' }}
           >
-            <a href="https://github.com/Bunlong/react-papaparse/blob/master/demo/CSVReader1.js">
+            <a href="https://github.com/Bunlong/react-papaparse/blob/v4.0.0/examples/CSVReaderBasicUpload.tsx">
               Source code
             </a>
           </span>
@@ -100,54 +110,17 @@ const CSVToJSON = () => {
               <code>'text/csv, .csv, application/vnd.ms-excel'</code>.
             </li>
             <li>
-              <code>
-                <a
-                  href="https://reactjs.org/docs/refs-and-the-dom.html"
-                  target="_blank"
-                >
-                  ref
-                </a>
-              </code>{' '}
-              is a way to access/get files from{' '}
-              <code>{'<input type="file">'}</code> element.
-            </li>
-            <li>
-              <code>onFileLoad</code> is the function to be called passing
-              loaded results.
-            </li>
-            <li>
-              <code>onError</code> is error handling function.
-            </li>
-            <li>
-              <code>isReset</code> If true, reset CSVReader.
+              <code>onUploadAccepted</code> is the function to be called passing
+              uploaded results.
             </li>
             <li>
               <code>noClick</code> If true, disables click to open the native
               file selection dialog.
             </li>
-            <li>
-              <code>noDrag</code> If true, disables drag 'n' drop.
-            </li>
-            <li>
-              <code>noProgressBar</code> If true, disables progress bar.
-            </li>
-            <li>
-              <code>progressBarColor</code> is a property to be used to set the
-              color of progress bar (for example,{' '}
-              <code>progressBarColor='#659cef'</code>).
-            </li>
-            <li>
-              <code>style</code> is some styles to be applied to the{' '}
-              <code>{'<input>'}</code> element.
-            </li>
             <li>
               <code>config</code> is a <a href="#config">config object</a> which
               contains a callback.
             </li>
-            <li>
-              Doesn't return anything. Results are provided asynchronously to a
-              callback function.
-            </li>
           </ul>
         </div>
 
@@ -162,22 +135,78 @@ const CSVToJSON = () => {
           <pre>
             <code className="language-javascript">
               {`<CSVReader
-  onDrop={this.handleOnDrop}
-  onError={this.handleOnError}
-  style={{}}
-  config={{}}
-  addRemoveButton
-  onRemoveFile={this.handleOnRemoveFile}
+  onUploadAccepted={(results: any) => {
+    console.log('---------------------------');
+    console.log(results);
+    console.log('---------------------------');
+    setZoneHover(false);
+  }}
+  onDragOver={(event: DragEvent) => {
+    event.preventDefault();
+    setZoneHover(true);
+  }}
+  onDragLeave={(event: DragEvent) => {
+    event.preventDefault();
+    setZoneHover(false);
+  }}
 >
-  <span>Drop CSV file here or click to upload.</span>
-</CSVReader>
-`}
+  {({
+    getRootProps,
+    acceptedFile,
+    ProgressBar,
+    getRemoveFileProps,
+    Remove,
+  }: any) => (
+    <>
+      <div
+        {...getRootProps()}
+        style={Object.assign(
+          {},
+          styles.zone,
+          zoneHover && styles.zoneHover
+        )}
+      >
+        {acceptedFile ? (
+          <>
+            <div style={styles.file}>
+              <div style={styles.info}>
+                <span style={styles.size}>
+                  {formatFileSize(acceptedFile.size)}
+                </span>
+                <span style={styles.name}>{acceptedFile.name}</span>
+              </div>
+              <div style={styles.progressBar}>
+                <ProgressBar />
+              </div>
+              <div
+                {...getRemoveFileProps()}
+                style={styles.remove}
+                onMouseOver={(event: Event) => {
+                  event.preventDefault();
+                  setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
+                }}
+                onMouseOut={(event: Event) => {
+                  event.preventDefault();
+                  setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
+                }}
+              >
+                <Remove color={removeHoverColor} />
+              </div>
+            </div>
+          </>
+        ) : (
+          'Drop CSV file here or click to upload'
+        )}
+      </div>
+    </>
+  )}
+</CSVReader>`}
             </code>
           </pre>
           <span
             style={{ float: 'right', marginBottom: 14, textAlignLast: 'end' }}
           >
-            <a href="https://github.com/Bunlong/react-papaparse/blob/master/demo/CSVReader2.js">
+            <a href="https://github.com/Bunlong/react-papaparse/blob/v4.0.0/examples/CSVReaderClickAndDragUpload.tsx">
               Source code
             </a>
           </span>
@@ -190,52 +219,12 @@ const CSVToJSON = () => {
               <code>'text/csv, .csv, application/vnd.ms-excel'</code>.
             </li>
             <li>
-              <code>onDrop</code> is the function to be called passing loaded
-              results.
-            </li>
-            <li>
-              <code>onError</code> is error handling function.
-            </li>
-            <li>
-              <code>isReset</code> If true, reset CSVReader.
-            </li>
-            <li>
-              <code>noProgressBar</code> If true, disables progress bar.
-            </li>
-            <li>
-              <code>progressBarColor</code> is a property to be used to set the
-              color of progress bar (for example,{' '}
-              <code>progressBarColor='#659cef'</code>).
-            </li>
-            <li>
-              <code>style</code> is some styles to be applied to the{' '}
-              <code>{'<input>'}</code> element.
-            </li>
-            <li>
-              <code>addRemoveButton</code> If true, this will add a button to
-              remove or cancel (if already uploading) the file.
-            </li>
-            <li>
-              <code>removeButtonColor</code> is a property to be used to set the
-              color of remove button (for example,{' '}
-              <code>removeButtonColor='#659cef'</code>).
+              <code>onUploadAccepted</code> is the function to be called passing uploaded results.
             </li>
             <li>
               <code>config</code> is a <a href="#config">config object</a> which
               contains a callback.
             </li>
-            <li>
-              Doesn't return anything. Results are provided asynchronously to a
-              callback function.
-            </li>
-            <li>
-              <a
-                href="https://github.com/Bunlong/react-papaparse/wiki/CSVReader-(Drag-to-Upload)-Style"
-                target="_blank"
-              >
-                How to customize CSVReader (Drag to upload) style?
-              </a>
-            </li>
           </ul>
         </div>
 
@@ -250,23 +239,79 @@ const CSVToJSON = () => {
           <pre>
             <code className="language-javascript">
               {`<CSVReader
-  onDrop={this.handleOnDrop}
-  onError={this.handleOnError}
+  onUploadAccepted={(results: any) => {
+    console.log('---------------------------');
+    console.log(results);
+    console.log('---------------------------');
+    setZoneHover(false);
+  }}
+  onDragOver={(event: DragEvent) => {
+    event.preventDefault();
+    setZoneHover(true);
+  }}
+  onDragLeave={(event: DragEvent) => {
+    event.preventDefault();
+    setZoneHover(false);
+  }}
   noClick
-  style={{}}
-  config={{}}
-  addRemoveButton
-  onRemoveFile={this.handleOnRemoveFile}
 >
-  <span>Drop CSV file here to upload.</span>
-</CSVReader>
-`}
+  {({
+    getRootProps,
+    acceptedFile,
+    ProgressBar,
+    getRemoveFileProps,
+    Remove,
+  }: any) => (
+    <>
+      <div
+        {...getRootProps()}
+        style={Object.assign(
+          {},
+          styles.zone,
+          zoneHover && styles.zoneHover
+        )}
+      >
+        {acceptedFile ? (
+          <>
+            <div style={styles.file}>
+              <div style={styles.info}>
+                <span style={styles.size}>
+                  {formatFileSize(acceptedFile.size)}
+                </span>
+                <span style={styles.name}>{acceptedFile.name}</span>
+              </div>
+              <div style={styles.progressBar}>
+                <ProgressBar />
+              </div>
+              <div
+                {...getRemoveFileProps()}
+                style={styles.remove}
+                onMouseOver={(event: Event) => {
+                  event.preventDefault();
+                  setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
+                }}
+                onMouseOut={(event: Event) => {
+                  event.preventDefault();
+                  setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
+                }}
+              >
+                <Remove color={removeHoverColor} />
+              </div>
+            </div>
+          </>
+        ) : (
+          'Drop CSV file here to upload'
+        )}
+      </div>
+    </>
+  )}
+</CSVReader>`}
             </code>
           </pre>
           <span
             style={{ float: 'right', marginBottom: 14, textAlignLast: 'end' }}
           >
-            <a href="https://github.com/Bunlong/react-papaparse/blob/master/demo/CSVReader3.js">
+            <a href="https://github.com/Bunlong/react-papaparse/blob/v4.0.0/examples/CSVReaderDragNoClickUpload.tsx">
               Source code
             </a>
           </span>
@@ -279,56 +324,16 @@ const CSVToJSON = () => {
               <code>'text/csv, .csv, application/vnd.ms-excel'</code>.
             </li>
             <li>
-              <code>onDrop</code> is the function to be called passing loaded
-              results.
-            </li>
-            <li>
-              <code>onError</code> is error handling function.
-            </li>
-            <li>
-              <code>isReset</code> If true, reset CSVReader.
+              <code>onUploadAccepted</code> is the function to be called passing uploaded results.
             </li>
             <li>
               <code>noClick</code> If true, disables click to open the native
               file selection dialog.
             </li>
-            <li>
-              <code>noProgressBar</code> If true, disables progress bar.
-            </li>
-            <li>
-              <code>progressBarColor</code> is a property to be used to set the
-              color of progress bar (for example,{' '}
-              <code>progressBarColor='#659cef'</code>).
-            </li>
-            <li>
-              <code>style</code> is some styles to be applied to the{' '}
-              <code>{'<input>'}</code> element.
-            </li>
-            <li>
-              <code>addRemoveButton</code> If true, this will add a button to
-              remove or cancel (if already uploading) the file.
-            </li>
-            <li>
-              <code>removeButtonColor</code> is a property to be used to set the
-              color of remove button (for example,{' '}
-              <code>removeButtonColor='#659cef'</code>).
-            </li>
             <li>
               <code>config</code> is a <a href="#config">config object</a> which
               contains a callback.
             </li>
-            <li>
-              Doesn't return anything. Results are provided asynchronously to a
-              callback function.
-            </li>
-            <li>
-              <a
-                href="https://github.com/Bunlong/react-papaparse/wiki/CSVReader-(Drag-to-Upload)-Style"
-                target="_blank"
-              >
-                How to customize CSVReader (Drag to upload) style?
-              </a>
-            </li>
           </ul>
         </div>
 
@@ -342,24 +347,80 @@ const CSVToJSON = () => {
         <div className="grid-50">
           <pre>
             <code className="language-javascript">
-              {`<CSVReader 
-  onDrop={this.handleOnDrop}
-  onError={this.handleOnError}
+              {`<CSVReader
+  onUploadAccepted={(results: any) => {
+    console.log('---------------------------');
+    console.log(results);
+    console.log('---------------------------');
+    setZoneHover(false);
+  }}
+  onDragOver={(event: DragEvent) => {
+    event.preventDefault();
+    setZoneHover(true);
+  }}
+  onDragLeave={(event: DragEvent) => {
+    event.preventDefault();
+    setZoneHover(false);
+  }}
   noDrag
-  style={{}}
-  config={{}}
-  addRemoveButton
-  onRemoveFile={this.handleOnRemoveFile}
 >
-  <span>Click to upload.</span>
-</CSVReader>
-`}
+  {({
+    getRootProps,
+    acceptedFile,
+    ProgressBar,
+    getRemoveFileProps,
+    Remove,
+  }: any) => (
+    <>
+      <div
+        {...getRootProps()}
+        style={Object.assign(
+          {},
+          styles.zone,
+          zoneHover && styles.zoneHover
+        )}
+      >
+        {acceptedFile ? (
+          <>
+            <div style={styles.file}>
+              <div style={styles.info}>
+                <span style={styles.size}>
+                  {formatFileSize(acceptedFile.size)}
+                </span>
+                <span style={styles.name}>{acceptedFile.name}</span>
+              </div>
+              <div style={styles.progressBar}>
+                <ProgressBar />
+              </div>
+              <div
+                {...getRemoveFileProps()}
+                style={styles.remove}
+                onMouseOver={(event: Event) => {
+                  event.preventDefault();
+                  setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
+                }}
+                onMouseOut={(event: Event) => {
+                  event.preventDefault();
+                  setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
+                }}
+              >
+                <Remove color={removeHoverColor} />
+              </div>
+            </div>
+          </>
+        ) : (
+          'Click to upload'
+        )}
+      </div>
+    </>
+  )}
+</CSVReader>`}
             </code>
           </pre>
           <span
             style={{ float: 'right', marginBottom: 14, textAlignLast: 'end' }}
           >
-            <a href="https://github.com/Bunlong/react-papaparse/blob/master/demo/CSVReader4.js">
+            <a href="https://github.com/Bunlong/react-papaparse/blob/v4.0.0/examples/CSVReaderClickNoDragUpload.tsx">
               Source code
             </a>
           </span>
@@ -372,55 +433,15 @@ const CSVToJSON = () => {
               <code>'text/csv, .csv, application/vnd.ms-excel'</code>.
             </li>
             <li>
-              <code>onDrop</code> is the function to be called passing loaded
-              results.
-            </li>
-            <li>
-              <code>onError</code> is error handling function.
-            </li>
-            <li>
-              <code>isReset</code> If true, reset CSVReader.
+              <code>onUploadAccepted</code> is the function to be called passing uploaded results.
             </li>
             <li>
               <code>noDrag</code> If true, disables drag 'n' drop.
             </li>
-            <li>
-              <code>noProgressBar</code> If true, disables progress bar.
-            </li>
-            <li>
-              <code>progressBarColor</code> is a property to be used to set the
-              color of progress bar (for example,{' '}
-              <code>progressBarColor='#659cef'</code>).
-            </li>
-            <li>
-              <code>style</code> is some styles to be applied to the{' '}
-              <code>{'<input>'}</code> element.
-            </li>
-            <li>
-              <code>addRemoveButton</code> If true, this will add a button to
-              remove or cancel (if already uploading) the file.
-            </li>
-            <li>
-              <code>removeButtonColor</code> is a property to be used to set the
-              color of remove button (for example,{' '}
-              <code>removeButtonColor='#659cef'</code>).
-            </li>
             <li>
               <code>config</code> is a <a href="#config">config object</a> which
               contains a callback.
             </li>
-            <li>
-              Doesn't return anything. Results are provided asynchronously to a
-              callback function.
-            </li>
-            <li>
-              <a
-                href="https://github.com/Bunlong/react-papaparse/wiki/CSVReader-(Drag-to-Upload)-Style"
-                target="_blank"
-              >
-                How to customize CSVReader (Drag to upload) style?
-              </a>
-            </li>
           </ul>
         </div>
 
@@ -437,6 +458,13 @@ const CSVToJSON = () => {
 })`}
             </code>
           </pre>
+          <span
+            style={{ float: 'right', marginBottom: 14, textAlignLast: 'end' }}
+          >
+            <a href="https://github.com/Bunlong/react-papaparse/blob/v4.0.0/examples/readRemoteFile.tsx">
+              Source code
+            </a>
+          </span>
         </div>
         <div className="grid-50">
           <ul>
diff --git a/docs/src/components/screens/docs/JSONToCSV.js b/docs/src/components/screens/docs/JSONToCSV.js
index 3fa80b8..ce173d6 100644
--- a/docs/src/components/screens/docs/JSONToCSV.js
+++ b/docs/src/components/screens/docs/JSONToCSV.js
@@ -22,6 +22,13 @@ const JSONToCSV = () => {
               )
             </code>
           </pre>
+          <span
+            style={{ float: 'right', marginBottom: 14, textAlignLast: 'end' }}
+          >
+            <a href="https://github.com/Bunlong/react-papaparse/blob/v4.0.0/examples/jsonToCSV.tsx">
+              Source code
+            </a>
+          </span>
         </div>
         <div className="grid-50">
           <ul>
diff --git a/docs/src/components/screens/indexes/CSVDownloader.js b/docs/src/components/screens/indexes/CSVDownloader.js
index b966eaf..eea37e5 100644
--- a/docs/src/components/screens/indexes/CSVDownloader.js
+++ b/docs/src/components/screens/indexes/CSVDownloader.js
@@ -14,21 +14,52 @@ const CSVDownloader = () => {
           </p>
           <pre>
             <code className="language-javascript">
-              {`<CSVDownloader
-  data={[
-    {
-      "Column 1": "1-1",
-      "Column 2": "1-2",
-      "Column 3": "1-3",
-      "Column 4": "1-4",
-    },
-  ]}
-  filename={'filename'}
-  config={{}}
->
-  Download
-</CSVDownloader>
-`}
+              {`import React from 'react';
+
+import { useCSVDownloader } from 'react-papaparse';
+
+export default function CSVDownloader() {
+  const { CSVDownloader, Type } = useCSVDownloader();
+
+  return (
+    <CSVDownloader
+      type={Type.Button}
+      filename={'filename'}
+      bom={true}
+      config={{
+        delimiter: ';',
+      }}
+      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,
+        },
+      ]}
+    >
+      Download
+    </CSVDownloader>
+  );
+}`}
             </code>
           </pre>
         </div>
@@ -52,8 +83,7 @@ const CSVDownloader = () => {
   }
 >
   Download
-</CSVDownloader>
-`}
+</CSVDownloader>`}
             </code>
           </pre>
         </div>
diff --git a/docs/src/components/screens/indexes/CSVParsing.js b/docs/src/components/screens/indexes/CSVParsing.js
index d7b0664..789f119 100644
--- a/docs/src/components/screens/indexes/CSVParsing.js
+++ b/docs/src/components/screens/indexes/CSVParsing.js
@@ -15,16 +15,32 @@ const CSVParsing = () => {
           </p>
           <pre>
             <code className="language-javascript">
-              {`import { readString } from 'react-papaparse'
+              {`import React from 'react';
 
-const config = {
-  worker: true,
-  complete: (results) => {
-    console.log(results)
-  }
-}
+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';
 
-readString(csvString, config)
+    readString(csvString, {
+      worker: true,
+      complete: (results) => {
+        console.log('---------------------------');
+        console.log(results);
+        console.log('---------------------------');
+      },
+    });
+  };
+
+  return <button onClick={() => handleReadString()}>readString</button>;
+}
 
 /*
 results = {
diff --git a/docs/src/components/screens/indexes/Delimiter.js b/docs/src/components/screens/indexes/Delimiter.js
index b0bdf94..87c0f34 100644
--- a/docs/src/components/screens/indexes/Delimiter.js
+++ b/docs/src/components/screens/indexes/Delimiter.js
@@ -13,14 +13,16 @@ const Delimiter = () => {
           </p>
           <pre>
             <code className="language-javascript">
-              {`import { readString } from 'react-papaparse'
-
-readString(csvString, {
+              {`const config = {
   worker: true,
   complete: (results) => {
-    console.log(results.meta.delimiter)
-  }
-})
+    console.log('---------------------------');
+    console.log(results.meta.delimiter);
+    console.log('---------------------------');
+  },
+};
+
+readString(csvString, config);
 
 `}
               <span>
diff --git a/docs/src/components/screens/indexes/LocalFile.js b/docs/src/components/screens/indexes/LocalFile.js
index 155e098..030b5ab 100644
--- a/docs/src/components/screens/indexes/LocalFile.js
+++ b/docs/src/components/screens/indexes/LocalFile.js
@@ -41,108 +41,69 @@ const LocalFile = () => {
           </div>
           <pre>
             <code className="language-javascript">
-              {`import React, { Component } from 'react'
+              {`import React, { CSSProperties } from 'react';
 
-import { CSVReader } from 'react-papaparse'
+import { useCSVReader } 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('---------------------------')
-  }
+const styles = {
+  csvReader: {
+    display: 'flex',
+    flexDirection: 'row',
+    marginBottom: 10,
+  } as CSSProperties,
+  browseFile: {
+    width: '20%',
+  } as CSSProperties,
+  acceptedFile: {
+    border: '1px solid #ccc',
+    height: 45,
+    lineHeight: 2.5,
+    paddingLeft: 10,
+    width: '80%',
+  } as CSSProperties,
+  remove: {
+    borderRadius: 0,
+    padding: '0 20px',
+  } as CSSProperties,
+  progressBarBackgroundColor: {
+    backgroundColor: 'red',
+  } as CSSProperties,
+};
 
-  handleRemoveFile = (e) => {
-    // Note that the ref is set async, so it might be null at some point
-    if (buttonRef.current) {
-      buttonRef.current.removeFile(e)
-    }
-  }
+export default function CSVReader() {
+  const { CSVReader } = useCSVReader();
 
-  render() {
-    return (
-      <CSVReader
-        ref={buttonRef}
-        onFileLoad={this.handleOnFileLoad}
-        onError={this.handleOnError}
-        noClick
-        noDrag
-        onRemoveFile={this.handleOnRemoveFile}
-      >
-        {({ file }) => (
-          <aside
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              marginBottom: 10
-            }}
-          >
-            <button
-              type='button'
-              onClick={this.handleOpenDialog}
-              style={{
-                borderRadius: 0,
-                marginLeft: 0,
-                marginRight: 0,
-                width: '40%',
-                paddingLeft: 0,
-                paddingRight: 0
-              }}
-            >
-              Browe file
+  return (
+    <CSVReader
+      onUploadAccepted={(results: any) => {
+        console.log('---------------------------');
+        console.log(results);
+        console.log('---------------------------');
+      }}
+    >
+      {({
+        getRootProps,
+        acceptedFile,
+        ProgressBar,
+        getRemoveFileProps,
+      }: any) => (
+        <>
+          <div style={styles.csvReader}>
+            <button type='button' {...getRootProps()} style={styles.browseFile}>
+              Browse file
             </button>
-            <div
-              style={{
-                borderWidth: 1,
-                borderStyle: 'solid',
-                borderColor: '#ccc',
-                height: 45,
-                lineHeight: 2.5,
-                marginTop: 5,
-                marginBottom: 5,
-                paddingLeft: 13,
-                paddingTop: 3,
-                width: '60%'
-              }}
-            >
-              {file && file.name}
+            <div style={styles.acceptedFile}>
+              {acceptedFile && acceptedFile.name}
             </div>
-            <button
-              style={{
-                borderRadius: 0,
-                marginLeft: 0,
-                marginRight: 0,
-                paddingLeft: 20,
-                paddingRight: 20
-              }}
-              onClick={this.handleRemoveFile}
-            >
+            <button {...getRemoveFileProps()} style={styles.remove}>
               Remove
             </button>
-          </aside>
-        )}
-      </CSVReader>
-    )
-  }
+          </div>
+          <ProgressBar style={styles.progressBarBackgroundColor} />
+        </>
+      )}
+    </CSVReader>
+  );
 }`}
             </code>
           </pre>
@@ -174,41 +135,166 @@ export default class CSVReader extends Component {
           </div>
           <pre>
             <code className="language-javascript">
-              {`import React, { Component } from 'react'
+              {`import React, { useState, CSSProperties } from 'react';
 
-import { CSVReader } from 'react-papaparse'
+import {
+  useCSVReader,
+  lightenDarkenColor,
+  formatFileSize,
+} from 'react-papaparse';
 
-export default class CSVReader extends Component {
-  handleOnDrop = (data) => {
-    console.log('---------------------------')
-    console.log(data)
-    console.log('---------------------------')
-  }
+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';
 
-  handleOnError = (err, file, inputElem, reason) => {
-    console.log(err)
-  }
+const styles = {
+  zone: {
+    alignItems: 'center',
+    borderWidth: 2,
+    borderStyle: 'dashed',
+    borderColor: 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,
+};
 
-  handleOnRemoveFile = (data) => {
-    console.log('---------------------------')
-    console.log(data)
-    console.log('---------------------------')
-  }
+export default function CSVReader() {
+  const { CSVReader } = useCSVReader();
+  const [zoneHover, setZoneHover] = useState(false);
+  const [removeHoverColor, setRemoveHoverColor] = useState(
+    DEFAULT_REMOVE_HOVER_COLOR
+  );
 
-  render() {
-    return (
-      <CSVReader
-        onDrop={this.handleOnDrop}
-        onError={this.handleOnError}
-        addRemoveButton
-        onRemoveFile={this.handleOnRemoveFile}
-      >
-        <span>Drop CSV file here or click to upload.</span>
-      </CSVReader>
-    )
-  }
-}
-`}
+  return (
+    <CSVReader
+      onUploadAccepted={(results: any) => {
+        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) => (
+        <>
+          <div
+            {...getRootProps()}
+            style={Object.assign(
+              {},
+              styles.zone,
+              zoneHover && styles.zoneHover
+            )}
+          >
+            {acceptedFile ? (
+              <>
+                <div style={styles.file}>
+                  <div style={styles.info}>
+                    <span style={styles.size}>
+                      {formatFileSize(acceptedFile.size)}
+                    </span>
+                    <span style={styles.name}>{acceptedFile.name}</span>
+                  </div>
+                  <div style={styles.progressBar}>
+                    <ProgressBar />
+                  </div>
+                  <div
+                    {...getRemoveFileProps()}
+                    style={styles.remove}
+                    onMouseOver={(event: Event) => {
+                      event.preventDefault();
+                      setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
+                    }}
+                    onMouseOut={(event: Event) => {
+                      event.preventDefault();
+                      setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
+                    }}
+                  >
+                    <Remove color={removeHoverColor} />
+                  </div>
+                </div>
+              </>
+            ) : (
+              'Drop CSV file here or click to upload'
+            )}
+          </div>
+        </>
+      )}
+    </CSVReader>
+  );
+}`}
             </code>
           </pre>
 
@@ -239,40 +325,166 @@ export default class CSVReader extends Component {
           </div>
           <pre>
             <code className="language-javascript">
-              {`import React, { Component } from 'react'
+              {`import React, { useState, CSSProperties } from 'react';
 
-import { CSVReader } from 'react-papaparse'
+import {
+  useCSVReader,
+  lightenDarkenColor,
+  formatFileSize,
+} from 'react-papaparse';
 
-export default class CSVReader extends Component {
-  handleOnDrop = (data) => {
-    console.log('---------------------------')
-    console.log(data)
-    console.log('---------------------------')
-  }
+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';
 
-  handleOnError = (err, file, inputElem, reason) => {
-    console.log(err)
-  }
+const styles = {
+  zone: {
+    alignItems: 'center',
+    borderWidth: 2,
+    borderStyle: 'dashed',
+    borderColor: 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,
+};
 
-  handleOnRemoveFile = (data) => {
-    console.log('---------------------------')
-    console.log(data)
-    console.log('---------------------------')
-  }
+export default function CSVReader() {
+  const { CSVReader } = useCSVReader();
+  const [zoneHover, setZoneHover] = useState(false);
+  const [removeHoverColor, setRemoveHoverColor] = useState(
+    DEFAULT_REMOVE_HOVER_COLOR
+  );
 
-  render() {
-    return (
-      <CSVReader
-        onDrop={this.handleOnDrop}
-        onError={this.handleOnError}
-        noClick
-        addRemoveButton
-        onRemoveFile={this.handleOnRemoveFile}
-      >
-        <span>Drop CSV file here to upload.</span>
-      </CSVReader>
-    )
-  }
+  return (
+    <CSVReader
+      onUploadAccepted={(results: any) => {
+        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) => (
+        <>
+          <div
+            {...getRootProps()}
+            style={Object.assign(
+              {},
+              styles.zone,
+              zoneHover && styles.zoneHover
+            )}
+          >
+            {acceptedFile ? (
+              <>
+                <div style={styles.file}>
+                  <div style={styles.info}>
+                    <span style={styles.size}>
+                      {formatFileSize(acceptedFile.size)}
+                    </span>
+                    <span style={styles.name}>{acceptedFile.name}</span>
+                  </div>
+                  <div style={styles.progressBar}>
+                    <ProgressBar />
+                  </div>
+                  <div
+                    {...getRemoveFileProps()}
+                    style={styles.remove}
+                    onMouseOver={(event: Event) => {
+                      event.preventDefault();
+                      setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
+                    }}
+                    onMouseOut={(event: Event) => {
+                      event.preventDefault();
+                      setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
+                    }}
+                  >
+                    <Remove color={removeHoverColor} />
+                  </div>
+                </div>
+              </>
+            ) : (
+              'Drop CSV file here to upload'
+            )}
+          </div>
+        </>
+      )}
+    </CSVReader>
+  );
 }`}
             </code>
           </pre>
@@ -304,40 +516,166 @@ export default class CSVReader extends Component {
           </div>
           <pre>
             <code className="language-javascript">
-              {`import React, { Component } from 'react'
+              {`import React, { useState, CSSProperties } from 'react';
 
-import { CSVReader } from 'react-papaparse'
+import {
+  useCSVReader,
+  lightenDarkenColor,
+  formatFileSize,
+} from 'react-papaparse';
 
-export default class CSVReader extends Component {
-  handleOnDrop = (data) => {
-    console.log('---------------------------')
-    console.log(data)
-    console.log('---------------------------')
-  }
+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';
 
-  handleOnError = (err, file, inputElem, reason) => {
-    console.log(err)
-  }
+const styles = {
+  zone: {
+    alignItems: 'center',
+    borderWidth: 2,
+    borderStyle: 'dashed',
+    borderColor: 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,
+};
 
-  handleOnRemoveFile = (data) => {
-    console.log('---------------------------')
-    console.log(data)
-    console.log('---------------------------')
-  }
+export default function CSVReader() {
+  const { CSVReader } = useCSVReader();
+  const [zoneHover, setZoneHover] = useState(false);
+  const [removeHoverColor, setRemoveHoverColor] = useState(
+    DEFAULT_REMOVE_HOVER_COLOR
+  );
 
-  render() {
-    return (
-      <CSVReader
-        onDrop={this.handleOnDrop}
-        onError={this.handleOnError}
-        noDrag
-        addRemoveButton
-        onRemoveFile={this.handleOnRemoveFile}
-      >
-        <span>Click to upload.</span>
-      </CSVReader>
-    )
-  }
+  return (
+    <CSVReader
+      onUploadAccepted={(results: any) => {
+        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) => (
+        <>
+          <div
+            {...getRootProps()}
+            style={Object.assign(
+              {},
+              styles.zone,
+              zoneHover && styles.zoneHover
+            )}
+          >
+            {acceptedFile ? (
+              <>
+                <div style={styles.file}>
+                  <div style={styles.info}>
+                    <span style={styles.size}>
+                      {formatFileSize(acceptedFile.size)}
+                    </span>
+                    <span style={styles.name}>{acceptedFile.name}</span>
+                  </div>
+                  <div style={styles.progressBar}>
+                    <ProgressBar />
+                  </div>
+                  <div
+                    {...getRemoveFileProps()}
+                    style={styles.remove}
+                    onMouseOver={(event: Event) => {
+                      event.preventDefault();
+                      setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
+                    }}
+                    onMouseOut={(event: Event) => {
+                      event.preventDefault();
+                      setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
+                    }}
+                  >
+                    <Remove color={removeHoverColor} />
+                  </div>
+                </div>
+              </>
+            ) : (
+              'Click to upload'
+            )}
+          </div>
+        </>
+      )}
+    </CSVReader>
+  );
 }`}
             </code>
           </pre>
diff --git a/docs/src/components/screens/indexes/Navbar.js b/docs/src/components/screens/indexes/Navbar.js
index 54680ea..3440e93 100644
--- a/docs/src/components/screens/indexes/Navbar.js
+++ b/docs/src/components/screens/indexes/Navbar.js
@@ -17,7 +17,7 @@ const Navbar = () => {
           </div>
           <div className="grid-20 hide-on-mobile text-center">
             <a href="/" className="text-logo">
-              react-papaparse 3
+              react-papaparse 4
             </a>
           </div>
           <div className="grid-40 mobile-grid-50 text-right">
@@ -32,7 +32,7 @@ const Navbar = () => {
       <div className="insignia">
         <div className="firefox-hack">
           <div id="version-intro">Version</div>
-          <div id="version">3</div>
+          <div id="version">4</div>
         </div>
       </div>
     </>
diff --git a/docs/src/components/screens/indexes/RemoteFile.js b/docs/src/components/screens/indexes/RemoteFile.js
index 67c592c..1bbe9f8 100644
--- a/docs/src/components/screens/indexes/RemoteFile.js
+++ b/docs/src/components/screens/indexes/RemoteFile.js
@@ -13,12 +13,25 @@ const RemoteFile = () => {
           </p>
           <pre>
             <code className="language-javascript">
-              {`readRemoteFile('http://example.com/file.csv', {
-  download: true,
-  complete: (results) => {
-    console.log(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 <button onClick={() => handleReadRemoteFile()}>readRemoteFile</button>;
+}`}
             </code>
           </pre>
         </div>
diff --git a/docs/src/components/screens/indexes/Stream.js b/docs/src/components/screens/indexes/Stream.js
index 19fb9f6..3e44b9f 100644
--- a/docs/src/components/screens/indexes/Stream.js
+++ b/docs/src/components/screens/indexes/Stream.js
@@ -14,14 +14,14 @@ const Stream = () => {
           </p>
           <pre>
             <code className="language-javascript">
-              {`readRemoteFile('http://example.com/big.csv', {
+              {`readRemoteFile(url, {
   step: (row) => {
     console.log('Row:', row.data)
   },
   complete: () => {
     console.log('All done!')
   }
-})`}
+});`}
             </code>
           </pre>
         </div>
diff --git a/docs/src/components/screens/indexes/Unparse.js b/docs/src/components/screens/indexes/Unparse.js
index 02d0926..57c19c5 100644
--- a/docs/src/components/screens/indexes/Unparse.js
+++ b/docs/src/components/screens/indexes/Unparse.js
@@ -14,8 +14,49 @@ const Unparse = () => {
           <pre>
             <code className="language-javascript">
               {`// Output is a properly-formatted CSV string.
-const csv = jsonToCSV(jsonData)
-`}
+
+import React from 'react';
+
+import { usePapaParse } from 'react-papaparse';
+
+export default function JsonToCSV() {
+  const { jsonToCSV } = usePapaParse();
+
+  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 <button onClick={() => handleJsonToCSV()}>jsonToCSV</button>;
+}`}
             </code>
           </pre>
         </div>
diff --git a/docs/src/components/screens/indexes/Welcome.js b/docs/src/components/screens/indexes/Welcome.js
index 47e703a..c855600 100644
--- a/docs/src/components/screens/indexes/Welcome.js
+++ b/docs/src/components/screens/indexes/Welcome.js
@@ -29,7 +29,7 @@ const Welcome = () => {
                 &nbsp; Documentation
               </a>
             </div>
-            <div id="title-code">
+            {/* <div id="title-code">
               <pre>
                 <code className="language-javascript">
                   {`// Parse CSV string
@@ -75,7 +75,7 @@ readRemoteFile(bigFileURL, {
 })`}
                 </code>
               </pre>
-            </div>
+            </div> */}
           </div>
         </div>
       </div>
diff --git a/docs/src/components/screens/indexes/Worker.js b/docs/src/components/screens/indexes/Worker.js
index 19c8ccd..059c47b 100644
--- a/docs/src/components/screens/indexes/Worker.js
+++ b/docs/src/components/screens/indexes/Worker.js
@@ -26,7 +26,7 @@ const Worker = () => {
   complete: () => {
     console.log('All done!')
   }
-})`}
+});`}
             </code>
           </pre>
         </div>
diff --git a/docs/static/css/home.css b/docs/static/css/home.css
index 580086c..85c31e8 100644
--- a/docs/static/css/home.css
+++ b/docs/static/css/home.css
@@ -1,5 +1,6 @@
 #top {
-	padding: 6% 0 8%;
+	/*padding: 6% 0 8%;*/
+  padding: 8% 0 15%;
 	color: #1D80AB;
 	background: #FFF;
 	position: relative;
@@ -176,7 +177,8 @@ footer {
 
 @media (max-width: 1150px) {
 	#title-main h1 {
-		font-size: 5.41vw;
+		/*font-size: 5.41vw;*/
+    font-size: 7.41vw;
 		letter-spacing: -2px;
 	}
 
@@ -216,9 +218,9 @@ footer {
 		display: none;
 	}
 
-	#top {
+	/*#top {
 		padding-top: 0;
-	}
+	}*/
 
 	#title-main,
 	#title-main h1,
diff --git a/docs/static/js/prism.js b/docs/static/js/prism.js
deleted file mode 100644
index f5a096e..0000000
--- a/docs/static/js/prism.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/* PrismJS 1.19.0
-https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
-var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(u){var c=/\blang(?:uage)?-([\w-]+)\b/i,n=0,C={manual:u.Prism&&u.Prism.manual,disableWorkerMessageHandler:u.Prism&&u.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof _?new _(e.type,C.util.encode(e.content),e.alias):Array.isArray(e)?e.map(C.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++n}),e.__id},clone:function r(e,t){var a,n,i=C.util.type(e);switch(t=t||{},i){case"Object":if(n=C.util.objId(e),t[n])return t[n];for(var o in a={},t[n]=a,e)e.hasOwnProperty(o)&&(a[o]=r(e[o],t));return a;case"Array":return n=C.util.objId(e),t[n]?t[n]:(a=[],t[n]=a,e.forEach(function(e,n){a[n]=r(e,t)}),a);default:return e}},getLanguage:function(e){for(;e&&!c.test(e.className);)e=e.parentElement;return e?(e.className.match(c)||[,"none"])[1].toLowerCase():"none"},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(e){var n=(/at [^(\r\n]*\((.*):.+:.+\)$/i.exec(e.stack)||[])[1];if(n){var r=document.getElementsByTagName("script");for(var t in r)if(r[t].src==n)return r[t]}return null}}},languages:{extend:function(e,n){var r=C.util.clone(C.languages[e]);for(var t in n)r[t]=n[t];return r},insertBefore:function(r,e,n,t){var a=(t=t||C.languages)[r],i={};for(var o in a)if(a.hasOwnProperty(o)){if(o==e)for(var l in n)n.hasOwnProperty(l)&&(i[l]=n[l]);n.hasOwnProperty(o)||(i[o]=a[o])}var s=t[r];return t[r]=i,C.languages.DFS(C.languages,function(e,n){n===s&&e!=r&&(this[e]=i)}),i},DFS:function e(n,r,t,a){a=a||{};var i=C.util.objId;for(var o in n)if(n.hasOwnProperty(o)){r.call(n,o,n[o],t||o);var l=n[o],s=C.util.type(l);"Object"!==s||a[i(l)]?"Array"!==s||a[i(l)]||(a[i(l)]=!0,e(l,r,o,a)):(a[i(l)]=!0,e(l,r,null,a))}}},plugins:{},highlightAll:function(e,n){C.highlightAllUnder(document,e,n)},highlightAllUnder:function(e,n,r){var t={callback:r,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};C.hooks.run("before-highlightall",t),t.elements=Array.prototype.slice.apply(t.container.querySelectorAll(t.selector)),C.hooks.run("before-all-elements-highlight",t);for(var a,i=0;a=t.elements[i++];)C.highlightElement(a,!0===n,t.callback)},highlightElement:function(e,n,r){var t=C.util.getLanguage(e),a=C.languages[t];e.className=e.className.replace(c,"").replace(/\s+/g," ")+" language-"+t;var i=e.parentNode;i&&"pre"===i.nodeName.toLowerCase()&&(i.className=i.className.replace(c,"").replace(/\s+/g," ")+" language-"+t);var o={element:e,language:t,grammar:a,code:e.textContent};function l(e){o.highlightedCode=e,C.hooks.run("before-insert",o),o.element.innerHTML=o.highlightedCode,C.hooks.run("after-highlight",o),C.hooks.run("complete",o),r&&r.call(o.element)}if(C.hooks.run("before-sanity-check",o),!o.code)return C.hooks.run("complete",o),void(r&&r.call(o.element));if(C.hooks.run("before-highlight",o),o.grammar)if(n&&u.Worker){var s=new Worker(C.filename);s.onmessage=function(e){l(e.data)},s.postMessage(JSON.stringify({language:o.language,code:o.code,immediateClose:!0}))}else l(C.highlight(o.code,o.grammar,o.language));else l(C.util.encode(o.code))},highlight:function(e,n,r){var t={code:e,grammar:n,language:r};return C.hooks.run("before-tokenize",t),t.tokens=C.tokenize(t.code,t.grammar),C.hooks.run("after-tokenize",t),_.stringify(C.util.encode(t.tokens),t.language)},matchGrammar:function(e,n,r,t,a,i,o){for(var l in r)if(r.hasOwnProperty(l)&&r[l]){var s=r[l];s=Array.isArray(s)?s:[s];for(var u=0;u<s.length;++u){if(o&&o==l+","+u)return;var c=s[u],g=c.inside,f=!!c.lookbehind,h=!!c.greedy,d=0,m=c.alias;if(h&&!c.pattern.global){var p=c.pattern.toString().match(/[imsuy]*$/)[0];c.pattern=RegExp(c.pattern.source,p+"g")}c=c.pattern||c;for(var y=t,v=a;y<n.length;v+=n[y].length,++y){var k=n[y];if(n.length>e.length)return;if(!(k instanceof _)){if(h&&y!=n.length-1){if(c.lastIndex=v,!(O=c.exec(e)))break;for(var b=O.index+(f&&O[1]?O[1].length:0),w=O.index+O[0].length,A=y,P=v,x=n.length;A<x&&(P<w||!n[A].type&&!n[A-1].greedy);++A)(P+=n[A].length)<=b&&(++y,v=P);if(n[y]instanceof _)continue;S=A-y,k=e.slice(v,P),O.index-=v}else{c.lastIndex=0;var O=c.exec(k),S=1}if(O){f&&(d=O[1]?O[1].length:0);w=(b=O.index+d)+(O=O[0].slice(d)).length;var j=k.slice(0,b),N=k.slice(w),E=[y,S];j&&(++y,v+=j.length,E.push(j));var L=new _(l,g?C.tokenize(O,g):O,m,O,h);if(E.push(L),N&&E.push(N),Array.prototype.splice.apply(n,E),1!=S&&C.matchGrammar(e,n,r,y,v,!0,l+","+u),i)break}else if(i)break}}}}},tokenize:function(e,n){var r=[e],t=n.rest;if(t){for(var a in t)n[a]=t[a];delete n.rest}return C.matchGrammar(e,r,n,0,0,!1),r},hooks:{all:{},add:function(e,n){var r=C.hooks.all;r[e]=r[e]||[],r[e].push(n)},run:function(e,n){var r=C.hooks.all[e];if(r&&r.length)for(var t,a=0;t=r[a++];)t(n)}},Token:_};function _(e,n,r,t,a){this.type=e,this.content=n,this.alias=r,this.length=0|(t||"").length,this.greedy=!!a}if(u.Prism=C,_.stringify=function(e,n){if("string"==typeof e)return e;if(Array.isArray(e))return e.map(function(e){return _.stringify(e,n)}).join("");var r={type:e.type,content:_.stringify(e.content,n),tag:"span",classes:["token",e.type],attributes:{},language:n};if(e.alias){var t=Array.isArray(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(r.classes,t)}C.hooks.run("wrap",r);var a=Object.keys(r.attributes).map(function(e){return e+'="'+(r.attributes[e]||"").replace(/"/g,"&quot;")+'"'}).join(" ");return"<"+r.tag+' class="'+r.classes.join(" ")+'"'+(a?" "+a:"")+">"+r.content+"</"+r.tag+">"},!u.document)return u.addEventListener&&(C.disableWorkerMessageHandler||u.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,t=n.code,a=n.immediateClose;u.postMessage(C.highlight(t,C.languages[r],r)),a&&u.close()},!1)),C;var e=C.util.currentScript();if(e&&(C.filename=e.src,e.hasAttribute("data-manual")&&(C.manual=!0)),!C.manual){function r(){C.manual||C.highlightAll()}var t=document.readyState;"loading"===t||"interactive"===t&&e&&e.defer?document.addEventListener("DOMContentLoaded",r):window.requestAnimationFrame?window.requestAnimationFrame(r):window.setTimeout(r,16)}return C}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
-Prism.languages.markup={comment:/<!--[\s\S]*?-->/,prolog:/<\?[\s\S]+?\?>/,doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:(?!<!--)[^"'\]]|"[^"]*"|'[^']*'|<!--[\s\S]*?-->)*\]\s*)?>/i,greedy:!0},cdata:/<!\[CDATA\[[\s\S]*?]]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/i,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))}),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^<!\[CDATA\[|\]\]>$/i;var n={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:s}};n["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var t={};t[a]={pattern:RegExp("(<__[\\s\\S]*?>)(?:<!\\[CDATA\\[[\\s\\S]*?\\]\\]>\\s*|[\\s\\S])*?(?=<\\/__>)".replace(/__/g,a),"i"),lookbehind:!0,greedy:!0,inside:n},Prism.languages.insertBefore("markup","cdata",t)}}),Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
-!function(s){var t=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+[\s\S]*?(?:;|(?=\s*\{))/,inside:{rule:/@[\w-]+/}},url:{pattern:RegExp("url\\((?:"+t.source+"|[^\n\r()]*)\\)","i"),inside:{function:/^url/i,punctuation:/^\(|\)$/}},selector:RegExp("[^{}\\s](?:[^{};\"']|"+t.source+")*?(?=\\s*\\{)"),string:{pattern:t,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var e=s.languages.markup;e&&(e.tag.addInlined("style","css"),s.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:e.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:s.languages.css}},alias:"language-css"}},e.tag))}(Prism);
-Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/};
-Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])[_$A-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|})\s*)(?:catch|finally)\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],number:/\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,function:/#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,operator:/--|\+\+|\*\*=?|=>|&&|\|\||[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?[.?]?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*]|\\.|[^/\\\[\r\n])+\/[gimyus]{0,6}(?=(?:\s|\/\*[\s\S]*?\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)?\s*\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=>)/i,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*\s*)\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.js=Prism.languages.javascript;
diff --git a/examples/CSVDownloader.tsx b/examples/CSVDownloader.tsx
new file mode 100644
index 0000000..ea0dee0
--- /dev/null
+++ b/examples/CSVDownloader.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { useCSVDownloader } from 'react-papaparse';
+
+export default function CSVDownloader() {
+  const { CSVDownloader, Type } = useCSVDownloader();
+
+  return (
+    <CSVDownloader
+      type={Type.Button}
+      filename={'filename'}
+      bom={true}
+      config={{
+        delimiter: ';',
+      }}
+      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,
+        },
+      ]}
+    >
+      Download
+    </CSVDownloader>
+  );
+}
diff --git a/examples/CSVReaderBasicUpload.tsx b/examples/CSVReaderBasicUpload.tsx
new file mode 100644
index 0000000..d791f7b
--- /dev/null
+++ b/examples/CSVReaderBasicUpload.tsx
@@ -0,0 +1,64 @@
+import React, { CSSProperties } from 'react';
+
+import { useCSVReader } from 'react-papaparse';
+
+const styles = {
+  csvReader: {
+    display: 'flex',
+    flexDirection: 'row',
+    marginBottom: 10,
+  } as CSSProperties,
+  browseFile: {
+    width: '20%',
+  } as CSSProperties,
+  acceptedFile: {
+    border: '1px solid #ccc',
+    height: 45,
+    lineHeight: 2.5,
+    paddingLeft: 10,
+    width: '80%',
+  } as CSSProperties,
+  remove: {
+    borderRadius: 0,
+    padding: '0 20px',
+  } as CSSProperties,
+  progressBarBackgroundColor: {
+    backgroundColor: 'red',
+  } as CSSProperties,
+};
+
+export default function CSVReader() {
+  const { CSVReader } = useCSVReader();
+
+  return (
+    <CSVReader
+      onUploadAccepted={(results: any) => {
+        console.log('---------------------------');
+        console.log(results);
+        console.log('---------------------------');
+      }}
+    >
+      {({
+        getRootProps,
+        acceptedFile,
+        ProgressBar,
+        getRemoveFileProps,
+      }: any) => (
+        <>
+          <div style={styles.csvReader}>
+            <button type='button' {...getRootProps()} style={styles.browseFile}>
+              Browse file
+            </button>
+            <div style={styles.acceptedFile}>
+              {acceptedFile && acceptedFile.name}
+            </div>
+            <button {...getRemoveFileProps()} style={styles.remove}>
+              Remove
+            </button>
+          </div>
+          <ProgressBar style={styles.progressBarBackgroundColor} />
+        </>
+      )}
+    </CSVReader>
+  );
+}
diff --git a/examples/CSVReaderClickAndDragUpload.tsx b/examples/CSVReaderClickAndDragUpload.tsx
new file mode 100644
index 0000000..bc527ed
--- /dev/null
+++ b/examples/CSVReaderClickAndDragUpload.tsx
@@ -0,0 +1,158 @@
+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 (
+    <CSVReader
+      onUploadAccepted={(results: any) => {
+        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) => (
+        <>
+          <div
+            {...getRootProps()}
+            style={Object.assign(
+              {},
+              styles.zone,
+              zoneHover && styles.zoneHover
+            )}
+          >
+            {acceptedFile ? (
+              <>
+                <div style={styles.file}>
+                  <div style={styles.info}>
+                    <span style={styles.size}>
+                      {formatFileSize(acceptedFile.size)}
+                    </span>
+                    <span style={styles.name}>{acceptedFile.name}</span>
+                  </div>
+                  <div style={styles.progressBar}>
+                    <ProgressBar />
+                  </div>
+                  <div
+                    {...getRemoveFileProps()}
+                    style={styles.remove}
+                    onMouseOver={(event: Event) => {
+                      event.preventDefault();
+                      setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
+                    }}
+                    onMouseOut={(event: Event) => {
+                      event.preventDefault();
+                      setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
+                    }}
+                  >
+                    <Remove color={removeHoverColor} />
+                  </div>
+                </div>
+              </>
+            ) : (
+              'Drop CSV file here or click to upload'
+            )}
+          </div>
+        </>
+      )}
+    </CSVReader>
+  );
+}
diff --git a/examples/CSVReaderClickNoDragUpload.tsx b/examples/CSVReaderClickNoDragUpload.tsx
new file mode 100644
index 0000000..851823c
--- /dev/null
+++ b/examples/CSVReaderClickNoDragUpload.tsx
@@ -0,0 +1,159 @@
+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 (
+    <CSVReader
+      onUploadAccepted={(results: any) => {
+        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) => (
+        <>
+          <div
+            {...getRootProps()}
+            style={Object.assign(
+              {},
+              styles.zone,
+              zoneHover && styles.zoneHover
+            )}
+          >
+            {acceptedFile ? (
+              <>
+                <div style={styles.file}>
+                  <div style={styles.info}>
+                    <span style={styles.size}>
+                      {formatFileSize(acceptedFile.size)}
+                    </span>
+                    <span style={styles.name}>{acceptedFile.name}</span>
+                  </div>
+                  <div style={styles.progressBar}>
+                    <ProgressBar />
+                  </div>
+                  <div
+                    {...getRemoveFileProps()}
+                    style={styles.remove}
+                    onMouseOver={(event: Event) => {
+                      event.preventDefault();
+                      setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
+                    }}
+                    onMouseOut={(event: Event) => {
+                      event.preventDefault();
+                      setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
+                    }}
+                  >
+                    <Remove color={removeHoverColor} />
+                  </div>
+                </div>
+              </>
+            ) : (
+              'Click to upload'
+            )}
+          </div>
+        </>
+      )}
+    </CSVReader>
+  );
+}
diff --git a/examples/CSVReaderDragNoClickUpload.tsx b/examples/CSVReaderDragNoClickUpload.tsx
new file mode 100644
index 0000000..dee2d53
--- /dev/null
+++ b/examples/CSVReaderDragNoClickUpload.tsx
@@ -0,0 +1,159 @@
+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 (
+    <CSVReader
+      onUploadAccepted={(results: any) => {
+        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) => (
+        <>
+          <div
+            {...getRootProps()}
+            style={Object.assign(
+              {},
+              styles.zone,
+              zoneHover && styles.zoneHover
+            )}
+          >
+            {acceptedFile ? (
+              <>
+                <div style={styles.file}>
+                  <div style={styles.info}>
+                    <span style={styles.size}>
+                      {formatFileSize(acceptedFile.size)}
+                    </span>
+                    <span style={styles.name}>{acceptedFile.name}</span>
+                  </div>
+                  <div style={styles.progressBar}>
+                    <ProgressBar />
+                  </div>
+                  <div
+                    {...getRemoveFileProps()}
+                    style={styles.remove}
+                    onMouseOver={(event: Event) => {
+                      event.preventDefault();
+                      setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
+                    }}
+                    onMouseOut={(event: Event) => {
+                      event.preventDefault();
+                      setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
+                    }}
+                  >
+                    <Remove color={removeHoverColor} />
+                  </div>
+                </div>
+              </>
+            ) : (
+              'Drop CSV file here to upload'
+            )}
+          </div>
+        </>
+      )}
+    </CSVReader>
+  );
+}
diff --git a/examples/jsonToCSV.tsx b/examples/jsonToCSV.tsx
new file mode 100644
index 0000000..4142af9
--- /dev/null
+++ b/examples/jsonToCSV.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { usePapaParse } from 'react-papaparse';
+
+export default function JsonToCSV() {
+  const { jsonToCSV } = usePapaParse();
+
+  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 <button onClick={() => handleJsonToCSV()}>jsonToCSV</button>;
+}
diff --git a/examples/readRemoteFile.tsx b/examples/readRemoteFile.tsx
new file mode 100644
index 0000000..68ac5d7
--- /dev/null
+++ b/examples/readRemoteFile.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { usePapaParse } from 'react-papaparse';
+
+export default function ReadRemoteFile() {
+  const { readRemoteFile } = usePapaParse();
+
+  const handleReadRemoteFile = () => {
+    readRemoteFile('https://react-papaparse.js.org/static/csv/normal.csv', {
+      complete: (results) => {
+        console.log('---------------------------');
+        console.log('Results:', results);
+        console.log('---------------------------');
+      },
+    });
+  };
+
+  return <button onClick={() => handleReadRemoteFile()}>readRemoteFile</button>;
+}
diff --git a/demo/ReadString.js b/examples/readString.tsx
similarity index 57%
rename from demo/ReadString.js
rename to examples/readString.tsx
index 5583e56..d631062 100644
--- a/demo/ReadString.js
+++ b/examples/readString.tsx
@@ -1,8 +1,11 @@
-import React, { Component } from 'react';
-import { readString } from 'react-papaparse';
+import React from 'react';
 
-export default class ReadString extends Component {
-  handleClick = () => {
+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
@@ -19,7 +22,5 @@ export default class ReadString extends Component {
     });
   };
 
-  render() {
-    return <button onClick={this.handleClick}>readString</button>;
-  }
+  return <button onClick={() => handleReadString()}>readString</button>;
 }
diff --git a/package.json b/package.json
index 4d95d82..e570a9e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-papaparse",
-  "version": "3.18.2",
+  "version": "4.0.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",
@@ -67,7 +67,7 @@
   "scripts": {
     "test": "jest --runInBand",
     "build": "rollup -c",
-    "prettier": "prettier --write './src/*.ts' './src/*.tsx' './demo/*js' --config ./.prettierrc",
+    "prettier": "prettier --write './src/*.ts' './src/*.tsx' --config ./.prettierrc",
     "lint:check": "eslint ./src --ext .tsx,.ts --report-unused-disable-directives",
     "bundlesize": "npm run build && bundlesize",
     "dev": "rollup -c -w",
diff --git a/src/CSVDownloader.tsx b/src/CSVDownloader.tsx
deleted file mode 100644
index 4e42051..0000000
--- a/src/CSVDownloader.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import React from 'react';
-import PapaParse, { UnparseConfig } from 'papaparse';
-
-export const LINK_TYPE = 'link';
-export const BUTTON_TYPE = 'button';
-
-export interface Props {
-  children: React.ReactNode;
-  data: any;
-  filename: string;
-  type?: 'link' | 'button';
-  style?: any;
-  className?: string;
-  bom?: boolean;
-  config?: UnparseConfig;
-}
-
-export default class CSVDownloader extends React.Component<Props> {
-  static defaultProps: Partial<Props> = {
-    type: LINK_TYPE,
-  };
-
-  // https://github.com/mholt/PapaParse/issues/175
-  download = (
-    data: any,
-    filename: string,
-    bom: boolean,
-    config: UnparseConfig,
-  ): void => {
-    const bomCode = bom ? '\ufeff' : '';
-    let csvContent = null;
-    let csvURL = null;
-
-    if (typeof data === 'function') {
-      data = data();
-    }
-
-    if (typeof data === 'object') {
-      csvContent = PapaParse.unparse(data, config);
-    } else {
-      csvContent = data;
-    }
-
-    const csvData = new Blob([`${bomCode}${csvContent}`], {
-      type: 'text/csv;charset=utf-8;',
-    });
-
-    const navObj: any = window.navigator;
-    if (navObj.msSaveBlob) {
-      csvURL = navObj.msSaveBlob(csvData, `${filename}.csv`);
-    } else {
-      csvURL = window.URL.createObjectURL(csvData);
-    }
-
-    const link = document.createElement('a');
-    link.href = csvURL as string;
-    link.setAttribute('download', `${filename}.csv`);
-    link.click();
-    link.remove();
-  };
-
-  render(): React.ReactNode {
-    const {
-      children,
-      data,
-      filename,
-      type,
-      className,
-      style,
-      bom = false,
-      config = {},
-    } = this.props;
-
-    if (type === LINK_TYPE) {
-      return (
-        <a
-          onClick={() => this.download(data, filename, bom, config)}
-          className={className}
-          style={style}
-        >
-          {children}
-        </a>
-      );
-    }
-
-    return (
-      <button
-        onClick={() => this.download(data, filename, bom, config)}
-        className={className}
-        style={style}
-      >
-        {children}
-      </button>
-    );
-  }
-}
diff --git a/src/CSVReader.tsx b/src/CSVReader.tsx
deleted file mode 100644
index 350dcf5..0000000
--- a/src/CSVReader.tsx
+++ /dev/null
@@ -1,588 +0,0 @@
-import React, { CSSProperties } from 'react';
-import PapaParse, { ParseResult } from 'papaparse';
-import { CustomConfig } from './model';
-import getSize, { lightenDarkenColor } from './utils';
-import RemoveIcon from './RemoveIcon';
-import ProgressBar from './ProgressBar';
-
-const GREY = '#CCC';
-const GREY_LIGHT = 'rgba(255, 255, 255, 0.4)';
-const REMOVE_ICON_DEFAULT_COLOR = '#A01919';
-const GREY_DIM = '#686868';
-// 'text/csv' for MacOS
-// '.csv' for Linux
-// 'application/vnd.ms-excel' for Window 10
-const DEFAULT_ACCEPT = 'text/csv, .csv, application/vnd.ms-excel';
-
-const styles = {
-  dropArea: {
-    alignItems: 'center',
-    borderStyle: 'dashed',
-    borderWidth: 2,
-    borderRadius: 20,
-    borderColor: GREY,
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    justifyContent: 'center',
-    padding: 20,
-  } as CSSProperties,
-  dropAreaDefaultBorderColor: {
-    borderColor: GREY,
-  },
-  inputFile: {
-    display: 'none',
-  } as CSSProperties,
-  highlight: {
-    borderColor: GREY_DIM,
-  },
-  unhighlight: {
-    borderColor: GREY,
-  } as CSSProperties,
-  dropFile: {
-    background: 'linear-gradient(to bottom, #EEE, #DDD)',
-    borderRadius: 20,
-    display: 'block',
-    height: 120,
-    width: 100,
-    paddingLeft: 10,
-    paddingRight: 10,
-    position: 'relative',
-    zIndex: 10,
-  } as CSSProperties,
-  column: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-  } as CSSProperties,
-  fileSizeInfo: {
-    backgroundColor: GREY_LIGHT,
-    borderRadius: 3,
-    lineHeight: 1,
-    marginBottom: '0.5em',
-    padding: '0 0.4em',
-  } as CSSProperties,
-  fileNameInfo: {
-    backgroundColor: GREY_LIGHT,
-    borderRadius: 3,
-    fontSize: 14,
-    lineHeight: 1,
-    padding: '0 0.4em',
-  } as CSSProperties,
-  defaultCursor: {
-    cursor: 'default',
-  } as CSSProperties,
-  pointerCursor: {
-    cursor: 'pointer',
-  } as CSSProperties,
-  dropFileRemoveButton: {
-    height: 23,
-    position: 'absolute',
-    right: 6,
-    top: 6,
-    width: 23,
-  } as CSSProperties,
-};
-
-interface Props<T> {
-  children: any;
-  onDrop?: (data: Array<ParseResult<T>>, file?: any) => void;
-  onFileLoad?: (data: Array<ParseResult<T>>, file?: any) => void;
-  onError?: (err: any, file: any, inputElem: any, reason: any) => void;
-  config?: CustomConfig<T>;
-  style?: any;
-  noClick?: boolean;
-  noDrag?: boolean;
-  progressBarColor?: string;
-  addRemoveButton?: boolean;
-  onRemoveFile?: (data: null) => void;
-  noProgressBar?: boolean;
-  removeButtonColor?: string;
-  isReset?: boolean;
-  accept?: string;
-}
-
-interface State {
-  dropAreaCustom: any;
-  progressBar: number;
-  displayProgressBarStatus: string;
-  file: any;
-  timeout: any;
-  files: any;
-  removeIconColor: string;
-  isCanceled: boolean;
-}
-
-export default class CSVReader<T = any> extends React.Component<
-  Props<T>,
-  State
-> {
-  static defaultProps: Partial<Props<unknown>> = {
-    isReset: false,
-  };
-
-  // TODO
-  // inputFileRef: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>()
-  inputFileRef: any = React.createRef<HTMLDivElement>();
-  dropAreaRef: any = React.createRef<HTMLDivElement>();
-  fileSizeInfoRef: any = React.createRef<HTMLDivElement>();
-  fileNameInfoRef: any = React.createRef<HTMLDivElement>();
-
-  // TODO: Delete this.props.removeButtonColor
-  REMOVE_ICON_COLOR =
-    this.props.removeButtonColor ||
-    this.props.style?.dropArea?.dropFile?.removeButton?.color ||
-    this.props.style?.dropFile?.removeButton?.color ||
-    this.props.style?.removeButton?.color ||
-    REMOVE_ICON_DEFAULT_COLOR;
-  REMOVE_ICON_COLOR_LIGHT = lightenDarkenColor(this.REMOVE_ICON_COLOR, 40);
-
-  state = {
-    dropAreaCustom: {},
-    progressBar: 0,
-    displayProgressBarStatus: 'none',
-    file: null,
-    timeout: null,
-    files: null,
-    removeIconColor: this.REMOVE_ICON_COLOR,
-    isCanceled: false,
-  } as State;
-
-  componentDidUpdate = (prevProps: any) => {
-    if (this.props.isReset !== prevProps.isReset) {
-      this.removeFile();
-    }
-  };
-
-  componentDidMount = () => {
-    const currentDropAreaRef = this.dropAreaRef.current;
-    if (currentDropAreaRef) {
-      const fourDragsEvent = ['dragenter', 'dragover', 'dragleave', 'drop'];
-      fourDragsEvent.forEach((item) => {
-        currentDropAreaRef.addEventListener(item, this.preventDefaults, false);
-      });
-
-      if (!this.props.noDrag) {
-        const highlightDragsEvent = ['dragenter', 'dragover'];
-        highlightDragsEvent.forEach((item) => {
-          currentDropAreaRef.addEventListener(item, this.highlight, false);
-        });
-        currentDropAreaRef.addEventListener(
-          'dragleave',
-          this.unhighlight,
-          false,
-        );
-        currentDropAreaRef.addEventListener('drop', this.unhighlight, false);
-        currentDropAreaRef.addEventListener(
-          'drop',
-          this.visibleProgressBar,
-          false,
-        );
-        currentDropAreaRef.addEventListener('drop', this.handleDrop, false);
-      }
-    }
-  };
-
-  componentWillUnmount = () => {
-    const currentDropAreaRef = this.dropAreaRef.current;
-
-    const fourDragsEvent = ['dragenter', 'dragover', 'dragleave', 'drop'];
-    fourDragsEvent.forEach((item) => {
-      currentDropAreaRef.removeEventListener(item, this.preventDefaults, false);
-    });
-
-    if (!this.props.noDrag) {
-      const highlightDragsEvent = ['dragenter', 'dragover'];
-      highlightDragsEvent.forEach((item) => {
-        currentDropAreaRef.removeEventListener(item, this.highlight, false);
-      });
-      currentDropAreaRef.removeEventListener(
-        'dragleave',
-        this.unhighlight,
-        false,
-      );
-      currentDropAreaRef.removeEventListener('drop', this.unhighlight, false);
-      currentDropAreaRef.removeEventListener(
-        'drop',
-        this.visibleProgressBar,
-        false,
-      );
-      currentDropAreaRef.removeEventListener('drop', this.handleDrop, false);
-    }
-  };
-
-  preventDefaults = (e: any) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-
-  highlight = () => {
-    const { style } = this.props;
-    this.setState({
-      dropAreaCustom: Object.assign(
-        {},
-        style?.dropAreaActive
-          ? style?.dropAreaActive.borderColor
-            ? style?.dropAreaActive
-            : Object.assign({}, style?.dropAreaActive, styles.highlight)
-          : style?.dropArea?.dropAreaActive
-          ? style?.dropArea?.dropAreaActive.borderColor
-            ? style?.dropArea?.dropAreaActive
-            : Object.assign(
-                {},
-                style?.dropArea?.dropAreaActive,
-                styles.highlight,
-              )
-          : styles.highlight,
-      ),
-    });
-    this.setState({ progressBar: 0 });
-  };
-
-  unhighlight = () => {
-    this.setState({
-      dropAreaCustom: Object.assign(
-        {},
-        this.props.style?.dropArea?.borderColor
-          ? {}
-          : styles.dropAreaDefaultBorderColor,
-      ),
-    });
-  };
-
-  visibleProgressBar = () => {
-    if (!this.props.noProgressBar) {
-      this.setState({ displayProgressBarStatus: 'block' });
-    }
-  };
-
-  handleDrop = (e: any) => {
-    let files = null;
-    let isCanceled = false;
-
-    if (e.files === undefined) {
-      const dt = e.dataTransfer;
-      files = dt.files;
-    } else {
-      files = e.files;
-    }
-
-    if (files.length === 0) {
-      files = this.state.files;
-      isCanceled = true;
-    }
-
-    this.setState({ files, isCanceled }, () => {
-      this.handleFiles();
-    });
-  };
-
-  handleFiles = () => {
-    this.setState({ progressBar: 0 });
-    let files = null;
-    files = [...this.state.files];
-    files.forEach(this.uploadFile);
-  };
-
-  uploadFile = (file: any) => {
-    this.displayFileInfo(file);
-    this.setState({ file });
-
-    const { onDrop, onFileLoad, onError, config = {} } = this.props;
-    const reader = new window.FileReader();
-    let options = {};
-
-    const size = file.size;
-    const data: any = [];
-    let percent = 0;
-
-    if (onDrop || onFileLoad) {
-      const self = this;
-      options = Object.assign(
-        {
-          complete:
-            config?.complete || config?.step
-              ? config.complete
-              : () => {
-                  if (!onDrop && onFileLoad) {
-                    onFileLoad(data, file);
-                  } else if (onDrop && !onFileLoad) {
-                    onDrop(data, file);
-                  }
-                },
-          step: config?.step
-            ? config.step
-            : (row: any) => {
-                data.push(row);
-                if (config && config.preview) {
-                  percent = Math.round((data.length / config.preview) * 100);
-                  self.setState({ progressBar: percent });
-                  if (data.length === config.preview) {
-                    if (!onDrop && onFileLoad) {
-                      onFileLoad(data, file);
-                    } else if (onDrop && !onFileLoad) {
-                      onDrop(data, file);
-                    }
-                  }
-                } else {
-                  const progress = row.meta.cursor;
-                  const newPercent = Math.round((progress / size) * 100);
-                  if (newPercent === percent) {
-                    return;
-                  }
-                  percent = newPercent;
-                }
-                self.setState({ progressBar: percent });
-              },
-        },
-        options,
-      );
-    }
-
-    if (onError) {
-      options = Object.assign({ error: onError }, options);
-    }
-
-    if (config) {
-      options = Object.assign({}, config, options);
-    }
-
-    reader.onload = (e: any) => {
-      PapaParse.parse(e.target.result, options);
-    };
-
-    if (!this.props.noProgressBar) {
-      reader.onloadend = () => {
-        clearTimeout(this.state.timeout);
-        this.setState({
-          timeout: setTimeout(() => {
-            this.disableProgressBar();
-          }, 2000),
-        });
-      };
-    }
-
-    reader.readAsText(file, config.encoding || 'utf-8');
-  };
-
-  displayFileInfo = (file: any) => {
-    if (!this.childrenIsFunction()) {
-      this.fileSizeInfoRef.current.innerHTML = getSize(file.size);
-      this.fileNameInfoRef.current.innerHTML = file.name;
-    }
-  };
-
-  disableProgressBar = () => {
-    if (!this.props.noProgressBar) {
-      this.setState({ displayProgressBarStatus: 'none' });
-    }
-  };
-
-  childrenIsFunction = () => {
-    return typeof this.props.children === 'function';
-  };
-
-  fileChange = (e: any) => {
-    const { target } = e;
-    if (!this.props.noProgressBar) {
-      this.setState({ displayProgressBarStatus: 'block' }, () => {
-        this.handleDrop(target);
-      });
-    } else {
-      this.handleDrop(target);
-    }
-  };
-
-  open = (e: any) => {
-    const { displayProgressBarStatus } = this.state;
-    if (e && displayProgressBarStatus === 'none') {
-      this.preventDefaults(e);
-      this.inputFileRef.current.value = null;
-      this.inputFileRef.current.click();
-    }
-  };
-
-  renderChildren = () => {
-    const { children } = this.props;
-    const { file, progressBar } = this.state;
-    return this.childrenIsFunction()
-      ? children({ file, progressBar })
-      : children;
-  };
-
-  handleRemoveFile = (e: any) => {
-    if (e) {
-      e.stopPropagation();
-      this.removeFile();
-    }
-  };
-
-  removeFile = () => {
-    this.setState({ files: null, file: null });
-
-    const { onRemoveFile } = this.props;
-    if (onRemoveFile) {
-      onRemoveFile(null);
-    }
-
-    this.inputFileRef.current.value = null;
-  };
-
-  changeRemoveIconColor = (color: string) => {
-    if (color) {
-      this.setState({ removeIconColor: color });
-    }
-  };
-
-  renderDropFileRemoveButton = () => {
-    const { addRemoveButton } = this.props;
-    const { removeIconColor, displayProgressBarStatus } = this.state;
-
-    if (addRemoveButton && displayProgressBarStatus === 'none') {
-      return (
-        <div
-          style={styles.dropFileRemoveButton}
-          onClick={(e) => this.handleRemoveFile(e)}
-          onMouseOver={() =>
-            this.changeRemoveIconColor(this.REMOVE_ICON_COLOR_LIGHT)
-          }
-          onMouseOut={() => this.changeRemoveIconColor(this.REMOVE_ICON_COLOR)}
-        >
-          <RemoveIcon color={removeIconColor} />
-        </div>
-      );
-    }
-
-    if (addRemoveButton) {
-      return (
-        <div style={styles.dropFileRemoveButton}>
-          <RemoveIcon color={this.REMOVE_ICON_COLOR} />
-        </div>
-      );
-    }
-
-    return null;
-  };
-
-  render() {
-    const {
-      style,
-      noClick,
-      children,
-      noProgressBar,
-      progressBarColor,
-      accept,
-    } = this.props;
-    const {
-      dropAreaCustom,
-      files,
-      isCanceled,
-      progressBar,
-      displayProgressBarStatus,
-    } = this.state;
-
-    return (
-      <>
-        <input
-          type="file"
-          accept={accept || DEFAULT_ACCEPT}
-          ref={this.inputFileRef}
-          style={styles.inputFile}
-          onChange={(e) => this.fileChange(e)}
-        />
-        {!this.childrenIsFunction() ? (
-          <div
-            ref={this.dropAreaRef}
-            style={Object.assign(
-              {},
-              styles.dropArea,
-              style?.dropArea,
-              dropAreaCustom,
-              noClick !== undefined || displayProgressBarStatus === 'block'
-                ? styles.defaultCursor
-                : styles.pointerCursor,
-            )}
-            onClick={(e) => {
-              if (!noClick) {
-                this.open(e);
-              }
-            }}
-          >
-            {files && files.length > 0 ? (
-              <div
-                style={Object.assign(
-                  {},
-                  styles.dropFile,
-                  styles.column,
-                  style?.dropArea?.dropFile || style?.dropFile,
-                )}
-              >
-                {this.renderDropFileRemoveButton()}
-                <div style={styles.column}>
-                  <span
-                    style={Object.assign(
-                      {},
-                      styles.fileSizeInfo,
-                      style?.dropArea?.dropFile?.fileSizeInfo ||
-                        style?.dropArea?.fileSizeInfo ||
-                        style?.fileSizeInfo,
-                    )}
-                    ref={this.fileSizeInfoRef}
-                  />
-                  <span
-                    style={Object.assign(
-                      {},
-                      styles.fileNameInfo,
-                      style?.dropArea?.dropFile?.fileNameInfo ||
-                        style?.dropFile?.fileNameInfo ||
-                        style?.fileNameInfo,
-                    )}
-                    ref={this.fileNameInfoRef}
-                  />
-                </div>
-                {files && files.length > 0 && !isCanceled && !noProgressBar && (
-                  <ProgressBar
-                    // TODO: Delete progressBar
-                    style={Object.assign(
-                      {},
-                      progressBarColor
-                        ? { backgroundColor: progressBarColor }
-                        : {},
-                      style?.dropArea?.dropFile?.progressBar ||
-                        style?.dropFile?.progressBar ||
-                        style?.progressBar,
-                    )}
-                    progressBar={progressBar}
-                    displayProgressBarStatus={displayProgressBarStatus}
-                  />
-                )}
-              </div>
-            ) : (
-              children
-            )}
-          </div>
-        ) : (
-          <div ref={this.dropAreaRef}>
-            {this.renderChildren()}
-            {files && files.length > 0 && !isCanceled && !noProgressBar && (
-              <ProgressBar
-                // TODO: Delete progressBar
-                style={Object.assign(
-                  {},
-                  progressBarColor ? { backgroundColor: progressBarColor } : {},
-                  style?.dropArea?.dropFile?.progressBar ||
-                    style?.dropFile?.progressBar ||
-                    style?.progressBar,
-                )}
-                progressBar={progressBar}
-                displayProgressBarStatus={displayProgressBarStatus}
-                isButtonProgressBar
-              />
-            )}
-          </div>
-        )}
-      </>
-    );
-  }
-}
diff --git a/src/ProgressBar.tsx b/src/ProgressBar.tsx
index d52fdb7..1d13f05 100644
--- a/src/ProgressBar.tsx
+++ b/src/ProgressBar.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties, useState, useEffect } from 'react';
 
 const DEFAULT_PROGRESS_BAR_COLOR = '#659cef';
 
@@ -7,14 +7,14 @@ const styles = {
     borderRadius: 3,
     boxShadow: 'inset 0 1px 3px rgba(0, 0, 0, .2)',
     bottom: 14,
-    position: 'absolute',
-    width: '80%',
+    width: '100%',
+    // position: 'absolute',
   } as CSSProperties,
-  buttonProgressBar: {
+  button: {
     position: 'inherit',
     width: '100%',
   } as CSSProperties,
-  progressBarFill: {
+  fill: {
     backgroundColor: DEFAULT_PROGRESS_BAR_COLOR,
     borderRadius: 3,
     height: 10,
@@ -23,36 +23,28 @@ const styles = {
 };
 
 interface Props {
-  style: any;
-  progressBar: number;
-  displayProgressBarStatus: string;
-  isButtonProgressBar?: boolean;
+  style?: any;
+  className?: string;
+  percentage: number;
+  display: string;
+  isButton?: boolean;
 }
 
-export default class ProgressBar extends React.Component<Props> {
-  render() {
-    const {
-      style,
-      progressBar,
-      displayProgressBarStatus,
-      isButtonProgressBar,
-    } = this.props;
+export default function ProgressBar(props: Props) {
+  const { style, className, display } = props;
+  const [percentage, setPercentage] = useState(0);
+
+  useEffect(() => {
+    setPercentage(props.percentage);
+  }, [props.percentage]);
 
-    return (
-      <div
-        style={Object.assign(
-          {},
-          styles.progressBar,
-          isButtonProgressBar && styles.buttonProgressBar,
-        )}
-      >
-        <span
-          style={Object.assign({}, styles.progressBarFill, style, {
-            width: `${progressBar}%`,
-            display: displayProgressBarStatus,
-          })}
-        />
-      </div>
-    );
-  }
+  return (
+    <span
+      style={Object.assign({}, styles.progressBar, styles.fill, style, {
+        width: `${percentage}%`,
+        display,
+      })}
+      className={className}
+    />
+  );
 }
diff --git a/src/RemoveIcon.tsx b/src/Remove.tsx
similarity index 74%
rename from src/RemoveIcon.tsx
rename to src/Remove.tsx
index 6a1184a..93e369e 100644
--- a/src/RemoveIcon.tsx
+++ b/src/Remove.tsx
@@ -1,15 +1,21 @@
 import React from 'react';
 
-export default function RemoveIcon(props: { color: string }) {
+export interface Props {
+  color?: string;
+  width?: number;
+  height?: number;
+}
+
+export default function Remove({ color, width = 23, height = 23 }: Props) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="23"
-      height="23"
+      width={width}
+      height={height}
       viewBox="0 0 512 512"
     >
       <path
-        fill={props.color}
+        fill={color}
         d="M504.1 256C504.1 119 393 7.9 256 7.9S7.9 119 7.9 256 119 504.1 256 504.1 504.1 393 504.1 256z"
       />
       <path
diff --git a/src/react-papaparse.ts b/src/react-papaparse.ts
index deeec98..5628ee3 100644
--- a/src/react-papaparse.ts
+++ b/src/react-papaparse.ts
@@ -4,16 +4,10 @@ export const BAD_DELIMITERS = PapaParse.BAD_DELIMITERS;
 export const RECORD_SEP = PapaParse.RECORD_SEP;
 export const UNIT_SEP = PapaParse.UNIT_SEP;
 export const WORKERS_SUPPORTED = PapaParse.WORKERS_SUPPORTED;
-
 export const LocalChunkSize = PapaParse.LocalChunkSize;
 export const DefaultDelimiter = PapaParse.DefaultDelimiter;
 
-export { default as CSVReader } from './CSVReader';
-export {
-  default as CSVDownloader,
-  LINK_TYPE,
-  BUTTON_TYPE,
-} from './CSVDownloader';
-export { readString } from './readString';
-export { readRemoteFile } from './readRemoteFile';
-export { jsonToCSV } from './jsonToCSV';
+export { formatFileSize, lightenDarkenColor } from './utils';
+export { usePapaParse } from './usePapaParse';
+export { useCSVDownloader } from './useCSVDownloader';
+export { useCSVReader } from './useCSVReader';
diff --git a/src/useCSVDownloader.tsx b/src/useCSVDownloader.tsx
new file mode 100644
index 0000000..91e5610
--- /dev/null
+++ b/src/useCSVDownloader.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import PapaParse, { UnparseConfig } from 'papaparse';
+
+const Type = {
+  Link: 'link',
+  Button: 'button',
+} as const;
+
+export interface Props {
+  children: React.ReactNode;
+  data: any;
+  filename: string;
+  type?: 'link' | 'button';
+  style?: any;
+  className?: string;
+  bom?: boolean;
+  config?: UnparseConfig;
+}
+
+function useCSVDownloaderComponent() {
+  const CSVDownloaderComponent = ({
+    children,
+    data = {},
+    filename,
+    type = Type.Link,
+    style = {},
+    className = '',
+    bom = false,
+    config = {},
+  }: Props) => {
+    const download = () => {
+      const bomCode = bom ? '\ufeff' : '';
+      let csvContent = null;
+      let csvURL = null;
+
+      if (typeof data === 'function') {
+        data = data();
+      }
+
+      if (typeof data === 'object') {
+        csvContent = PapaParse.unparse(data, config);
+      } else {
+        csvContent = data;
+      }
+
+      const csvData = new Blob([`${bomCode}${csvContent}`], {
+        type: 'text/csv;charset=utf-8;',
+      });
+
+      const navObj: any = window.navigator;
+      if (navObj.msSaveBlob) {
+        csvURL = navObj.msSaveBlob(csvData, `${filename}.csv`);
+      } else {
+        csvURL = window.URL.createObjectURL(csvData);
+      }
+
+      const link = document.createElement('a');
+      link.href = csvURL as string;
+      link.setAttribute('download', `${filename}.csv`);
+      link.click();
+      link.remove();
+    };
+
+    return (
+      <>
+        {type === Type.Button ? (
+          <button
+            onClick={() => download()}
+            style={style}
+            className={className}
+          >
+            {children}
+          </button>
+        ) : (
+          <a onClick={() => download()} style={style} className={className}>
+            {children}
+          </a>
+        )}
+      </>
+    );
+  };
+
+  const CSVDownloader = React.useMemo(() => CSVDownloaderComponent, []) as any;
+
+  return CSVDownloader;
+}
+
+export function useCSVDownloader() {
+  const CSVDownloader = useCSVDownloaderComponent();
+
+  return {
+    CSVDownloader,
+    Type,
+  };
+}
diff --git a/src/useCSVReader.tsx b/src/useCSVReader.tsx
new file mode 100644
index 0000000..eff2298
--- /dev/null
+++ b/src/useCSVReader.tsx
@@ -0,0 +1,685 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, {
+  useReducer,
+  useCallback,
+  useMemo,
+  useEffect,
+  ReactNode,
+  useRef,
+} from 'react';
+import PapaParse, { ParseResult } from 'papaparse';
+import { CustomConfig } from './model';
+import {
+  composeEventHandlers,
+  isIeOrEdge,
+  isEventWithFiles,
+  isPropagationStopped,
+  fileAccepted,
+  fileMatchSize,
+  TOO_MANY_FILES_REJECTION,
+  onDocumentDragOver,
+} from './utils';
+import ProgressBar from './ProgressBar';
+import Remove, { Props as RemoveComponentProps } from './Remove';
+
+// 'text/csv' for MacOS
+// '.csv' for Linux
+// 'application/vnd.ms-excel' for Window 10
+const DEFAULT_ACCEPT = 'text/csv, .csv, application/vnd.ms-excel';
+
+export interface Props<T> {
+  children: (fn: any) => void | ReactNode;
+  accept?: string;
+  config?: CustomConfig<T>;
+  minSize?: number;
+  maxSize?: number;
+  maxFiles?: number;
+  disabled?: boolean;
+  noClick?: boolean;
+  noDrag?: boolean;
+  noDragEventsBubbling?: boolean;
+  noKeyboard?: boolean;
+  multiple?: boolean;
+  preventDropOnDocument?: boolean;
+  onUploadAccepted?: (
+    data: ParseResult<T>,
+    file?: File,
+    event?: DragEvent | Event,
+  ) => void;
+  onUploadRejected?: (file?: File, event?: DragEvent | Event) => void;
+  validator?: (file: File) => void;
+  onDragEnter?: (event?: DragEvent) => void;
+  onDragOver?: (event?: DragEvent) => void;
+  onDragLeave?: (event?: DragEvent) => void;
+}
+
+export interface ProgressBarComponentProp {
+  style?: any;
+  className?: string;
+}
+
+function useCSVReaderComponent<T = any>() {
+  const CSVReaderComponent = ({
+    children,
+    accept = DEFAULT_ACCEPT,
+    config = {},
+    minSize = 0,
+    maxSize = Infinity,
+    maxFiles = 1,
+    disabled = false,
+    noClick = false,
+    noDrag = false,
+    noDragEventsBubbling = false,
+    noKeyboard = false,
+    multiple = false,
+    preventDropOnDocument = true,
+    onUploadAccepted,
+    validator,
+    onUploadRejected,
+    onDragEnter,
+    onDragOver,
+    onDragLeave,
+  }: Props<T>) => {
+    const inputRef: any = useRef<ReactNode>(null);
+    const rootRef: any = useRef<ReactNode>(null);
+    const dragTargetsRef = useRef([]);
+
+    const [state, dispatch] = useReducer(reducer, initialState);
+    const {
+      acceptedFile,
+      displayProgressBar,
+      progressBarPercentage,
+      draggedFiles,
+      isFileDialogActive,
+    } = state;
+
+    const onDocumentDrop = (event: DragEvent) => {
+      if (rootRef.current && rootRef.current.contains(event.target)) {
+        // If we intercepted an event for our instance, let it propagate down to the instance's onDrop handler
+        return;
+      }
+      event.preventDefault();
+      dragTargetsRef.current = [];
+    };
+
+    useEffect(() => {
+      if (preventDropOnDocument) {
+        document.addEventListener('dragover', onDocumentDragOver, false);
+        document.addEventListener('drop', onDocumentDrop, false);
+      }
+
+      return () => {
+        if (preventDropOnDocument) {
+          document.removeEventListener('dragover', onDocumentDragOver);
+          document.removeEventListener('drop', onDocumentDrop);
+        }
+      };
+    }, [rootRef, preventDropOnDocument]);
+
+    // == GLOBAL ==
+    const composeHandler = (fn: any) => {
+      return disabled ? null : fn;
+    };
+
+    const composeDragHandler = (fn: any) => {
+      return noDrag ? null : composeHandler(fn);
+    };
+
+    const stopPropagation = (event: Event) => {
+      if (noDragEventsBubbling) {
+        event.stopPropagation();
+      }
+    };
+
+    const allowDrop = (event: any) => {
+      event.preventDefault(event);
+      // Persist here because we need the event later after getFilesFromEvent() is done
+      event.persist();
+      stopPropagation(event);
+    };
+
+    const setDisplayProgressBar = (display: string) => {
+      dispatch({
+        displayProgressBar: display,
+        type: 'setDisplayProgressBar',
+      });
+    };
+
+    const setProgressBarPercentage = (percentage: number) => {
+      dispatch({
+        progressBarPercentage: percentage,
+        type: 'setProgressBarPercentage',
+      });
+    };
+
+    const ProgressBarComponent = (props: ProgressBarComponentProp) => {
+      return (
+        <ProgressBar
+          display={displayProgressBar}
+          percentage={progressBarPercentage}
+          {...props}
+        />
+      );
+    };
+
+    const RemoveComponent = (props: RemoveComponentProps) => {
+      return <Remove {...props} />;
+    };
+
+    const renderChildren = () => {
+      return children({
+        getRootProps,
+        acceptedFile,
+        ProgressBar: ProgressBarComponent,
+        getRemoveFileProps,
+        Remove: RemoveComponent,
+      });
+    };
+
+    // Fn for opening the file dialog programmatically
+    const openFileDialog = useCallback(() => {
+      if (inputRef.current && state.displayProgressBar) {
+        dispatch({ type: 'openDialog' });
+        inputRef.current.value = null;
+        inputRef.current.click();
+      }
+    }, [dispatch]);
+
+    // Update file dialog active state when the window is focused on
+    const onWindowFocus = () => {
+      // Execute the timeout only if the file dialog is opened in the browser
+      if (isFileDialogActive) {
+        setTimeout(() => {
+          if (inputRef.current) {
+            const { files } = inputRef.current;
+
+            if (!files.length) {
+              dispatch({ type: 'closeDialog' });
+            }
+          }
+        }, 300);
+      }
+    };
+
+    useEffect(() => {
+      window.addEventListener('focus', onWindowFocus, false);
+      return () => {
+        window.removeEventListener('focus', onWindowFocus, false);
+      };
+    }, [inputRef, isFileDialogActive]);
+
+    // Cb to open the file dialog when click occurs on the dropzone
+    const onClickCb = useCallback(() => {
+      if (noClick) {
+        return;
+      }
+
+      // In IE11/Edge the file-browser dialog is blocking, therefore, use setTimeout()
+      // to ensure React can handle state changes
+      if (isIeOrEdge()) {
+        setTimeout(openFileDialog, 0);
+      } else {
+        openFileDialog();
+      }
+    }, [inputRef, noClick]);
+
+    const onDropCb = useCallback(
+      (event: any) => {
+        allowDrop(event);
+
+        setProgressBarPercentage(0);
+
+        dragTargetsRef.current = [];
+
+        if (isEventWithFiles(event)) {
+          if (isPropagationStopped(event) && !noDragEventsBubbling) {
+            return;
+          }
+
+          const acceptedFiles = [] as any;
+          const fileRejections = [] as any;
+          const files =
+            event.target.files ||
+            (event.dataTransfer && event.dataTransfer.files);
+          Array.from(files).forEach((file) => {
+            const [accepted, acceptError] = fileAccepted(file, accept);
+            const [sizeMatch, sizeError] = fileMatchSize(
+              file,
+              minSize,
+              maxSize,
+            );
+            const customErrors = validator ? validator(file as File) : null;
+
+            if (accepted && sizeMatch && !customErrors) {
+              acceptedFiles.push(file);
+            } else {
+              let errors = [acceptError, sizeError];
+
+              if (customErrors) {
+                errors = errors.concat(customErrors);
+              }
+
+              fileRejections.push({ file, errors: errors.filter((e) => e) });
+            }
+          });
+
+          if (
+            (!multiple && acceptedFiles.length > 1) ||
+            (multiple && maxFiles >= 1 && acceptedFiles.length > maxFiles)
+          ) {
+            // Reject everything and empty accepted files
+            acceptedFiles.forEach((file: File) => {
+              fileRejections.push({ file, errors: [TOO_MANY_FILES_REJECTION] });
+            });
+            acceptedFiles.splice(0);
+          }
+
+          dispatch({
+            acceptedFiles,
+            fileRejections,
+            type: 'setFiles',
+          });
+
+          setDisplayProgressBar('block');
+
+          // if (onDrop) {
+          //   onDrop(acceptedFiles, fileRejections, event)
+          // }
+
+          if (fileRejections.length > 0 && onUploadRejected) {
+            onUploadRejected(fileRejections, event);
+          }
+
+          if (acceptedFiles.length > 0 && onUploadAccepted) {
+            let configs = {} as any;
+            const data: any = [];
+            const errors: any = [];
+            const meta: any = [];
+            const reader = new window.FileReader();
+            let percentage = 0;
+
+            configs = Object.assign({}, config, configs);
+            acceptedFiles.forEach((file: File) => {
+              dispatch({
+                acceptedFile: file,
+                type: 'setFile',
+              });
+
+              configs = {
+                complete:
+                  config?.complete || config?.step
+                    ? config.complete
+                    : () => {
+                        const obj = { data, errors, meta };
+                        onUploadAccepted(obj, file);
+                      },
+                step: config?.step
+                  ? config.step
+                  : (row: any) => {
+                      data.push(row.data);
+                      if (row.errors.length > 0) {
+                        errors.push(row.errors);
+                      }
+                      if (row.length > 0) {
+                        meta.push(row[0].meta);
+                      }
+                      if (config && config.preview) {
+                        percentage = Math.round(
+                          (data.length / config.preview) * 100,
+                        );
+                        // setProgressBarPercentage(percentage);
+                        if (data.length === config.preview) {
+                          onUploadAccepted(data, file);
+                        }
+                      } else {
+                        const cursor = row.meta.cursor;
+                        const newPercentage = Math.round(
+                          (cursor / file.size) * 100,
+                        );
+                        if (newPercentage === percentage) {
+                          return;
+                        }
+                        percentage = newPercentage;
+                      }
+                      setProgressBarPercentage(percentage);
+                    },
+              };
+              reader.onload = (e: any) => {
+                PapaParse.parse(e.target.result, configs);
+              };
+              reader.onloadend = () => {
+                setTimeout(() => {
+                  setDisplayProgressBar('none');
+                }, 2000);
+              };
+              reader.readAsText(file, config.encoding || 'utf-8');
+            });
+          }
+        }
+        // dispatch({ type: 'reset' });
+      },
+      [
+        multiple,
+        accept,
+        minSize,
+        maxSize,
+        maxFiles,
+        validator,
+        onUploadAccepted,
+      ],
+    );
+
+    const onInputElementClick = useCallback((event) => {
+      stopPropagation(event);
+    }, []);
+    // ============
+
+    // == BUTTON | DROP ==
+    const composeKeyboardHandler = (fn: any) => {
+      return noKeyboard ? null : composeHandler(fn);
+    };
+
+    const onDragEnterCb = useCallback(
+      (event: DragEvent) => {
+        allowDrop(event);
+
+        dragTargetsRef.current = [
+          ...dragTargetsRef.current,
+          event.target,
+        ] as never[];
+
+        if (isEventWithFiles(event)) {
+          if (isPropagationStopped(event) && !noDragEventsBubbling) {
+            return;
+          }
+
+          dispatch({
+            draggedFiles,
+            isDragActive: true,
+            type: 'setDraggedFiles',
+          });
+
+          if (onDragEnter) {
+            onDragEnter(event);
+          }
+        }
+      },
+      [onDragEnter, noDragEventsBubbling],
+    );
+
+    const onDragOverCb = useCallback(
+      (event: DragEvent) => {
+        allowDrop(event);
+
+        const hasFiles = isEventWithFiles(event);
+        if (hasFiles && event.dataTransfer) {
+          try {
+            event.dataTransfer.dropEffect = 'copy';
+          } catch {}
+        }
+
+        if (hasFiles && onDragOver) {
+          onDragOver(event);
+        }
+
+        return false;
+      },
+      [onDragOver, noDragEventsBubbling],
+    );
+
+    const onDragLeaveCb = useCallback(
+      (event: DragEvent) => {
+        allowDrop(event);
+
+        // Only deactivate once the dropzone and all children have been left
+        const targets = dragTargetsRef.current.filter(
+          (target) => rootRef.current && rootRef.current.contains(target),
+        );
+        // Make sure to remove a target present multiple times only once
+        // (Firefox may fire dragenter/dragleave multiple times on the same element)
+        const targetIdx = targets.indexOf(event.target as never);
+        if (targetIdx !== -1) {
+          targets.splice(targetIdx, 1);
+        }
+        dragTargetsRef.current = targets;
+        if (targets.length > 0) {
+          return;
+        }
+
+        dispatch({
+          isDragActive: false,
+          type: 'setDraggedFiles',
+          draggedFiles: [],
+        });
+
+        if (isEventWithFiles(event) && onDragLeave) {
+          onDragLeave(event);
+        }
+      },
+      [rootRef, onDragLeave, noDragEventsBubbling],
+    );
+
+    // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone
+    const onKeyDownCb = useCallback(
+      (event: KeyboardEvent) => {
+        // Ignore keyboard events bubbling up the DOM tree
+        if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {
+          return;
+        }
+
+        if (event.key === 'Space' || event.key === 'Enter') {
+          event.preventDefault();
+          openFileDialog();
+        }
+      },
+      [rootRef, inputRef],
+    );
+
+    // Update focus state for the dropzone
+    const onFocusCb = useCallback(() => {
+      dispatch({ type: 'focus' });
+    }, []);
+
+    const onBlurCb = useCallback(() => {
+      dispatch({ type: 'blur' });
+    }, []);
+
+    const getRootProps = useMemo(
+      () =>
+        ({
+          onClick = () => {},
+          onDrop = () => {},
+          onDragOver = () => {},
+          onDragLeave = () => {},
+          onKeyDown = () => {},
+          onFocus = () => {},
+          onBlur = () => {},
+          onDragEnter = () => {},
+          // refKey = rootRef,
+          ...rest
+        } = {}) => ({
+          onClick: composeHandler(composeEventHandlers(onClick, onClickCb)),
+          onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb)),
+          onDragEnter: composeDragHandler(
+            composeEventHandlers(onDragEnter, onDragEnterCb),
+          ),
+          onDragOver: composeDragHandler(
+            composeEventHandlers(onDragOver, onDragOverCb),
+          ),
+          onDragLeave: composeDragHandler(
+            composeEventHandlers(onDragLeave, onDragLeaveCb),
+          ),
+          onKeyDown: composeKeyboardHandler(
+            composeEventHandlers(onKeyDown, onKeyDownCb), // Done
+          ),
+          onFocus: composeKeyboardHandler(
+            composeEventHandlers(onFocus, onFocusCb), // Done
+          ),
+          onBlur: composeKeyboardHandler(
+            composeEventHandlers(onBlur, onBlurCb), // Done
+          ),
+          // [refKey]: rootRef,
+          ...rest,
+        }),
+      [
+        rootRef,
+        onKeyDownCb,
+        onFocusCb,
+        onBlurCb,
+        onClickCb,
+        onDragEnterCb,
+        onDragOverCb,
+        onDragLeaveCb,
+        onDropCb,
+        noKeyboard,
+        noDrag,
+        disabled,
+      ],
+    );
+    // ===================
+
+    // == INPUT ==
+    const getInputProps = useMemo(
+      () =>
+        ({
+          refKey = 'ref',
+          onChange = () => {},
+          onClick = () => {},
+          ...rest
+        } = {}) => {
+          const inputProps = {
+            accept,
+            multiple,
+            type: 'file',
+            style: { display: 'none' },
+            onChange: composeHandler(composeEventHandlers(onChange, onDropCb)),
+            onClick: composeHandler(
+              composeEventHandlers(onClick, onInputElementClick),
+            ),
+            autoComplete: 'off',
+            tabIndex: -1,
+            [refKey]: inputRef,
+          };
+
+          return {
+            ...inputProps,
+            ...rest,
+          };
+        },
+      [inputRef, accept, onDropCb, disabled],
+    );
+    // ===========
+
+    const removeFileProgrammaticallyCb = useCallback((event: Event) => {
+      inputRef.current.value = '';
+      dispatch({ type: 'reset' });
+      // To prevent a parents onclick event from firing when a child is clicked
+      event.stopPropagation();
+    }, []);
+
+    const getRemoveFileProps = useMemo(
+      () =>
+        ({ onClick = () => {}, ...rest } = {}) => ({
+          onClick: composeHandler(
+            composeEventHandlers(onClick, removeFileProgrammaticallyCb),
+          ),
+          ...rest,
+        }),
+      [removeFileProgrammaticallyCb],
+    );
+
+    return (
+      <>
+        <input {...getInputProps()} />
+        {renderChildren()}
+      </>
+    );
+  };
+
+  const CSVReader = useMemo(() => CSVReaderComponent, []) as any;
+
+  return CSVReader;
+}
+
+export function useCSVReader() {
+  const CSVReader = useCSVReaderComponent();
+
+  return {
+    CSVReader,
+  };
+}
+
+const initialState = {
+  displayProgressBar: 'none',
+  progressBarPercentage: 0,
+  isDragActive: false,
+  isFileDialogActive: false,
+  isFocused: false,
+  draggedFiles: [],
+  acceptedFiles: [],
+  acceptedFile: null,
+
+  // isDragAccept: false,
+  // isDragReject: false,
+  // fileRejections: [],
+};
+
+function reducer(state: any, action: any) {
+  switch (action.type) {
+    case 'openDialog':
+      return {
+        ...state,
+        isFileDialogActive: true,
+      };
+    case 'closeDialog':
+      return {
+        ...state,
+        isFileDialogActive: false,
+      };
+    case 'setFiles':
+      return {
+        ...state,
+        acceptedFiles: action.acceptedFiles,
+        fileRejections: action.fileRejections,
+      };
+    case 'setFile':
+      return {
+        ...state,
+        acceptedFile: action.acceptedFile,
+      };
+    case 'setDisplayProgressBar':
+      return {
+        ...state,
+        displayProgressBar: action.displayProgressBar,
+      };
+    case 'setProgressBarPercentage':
+      return {
+        ...state,
+        progressBarPercentage: action.progressBarPercentage,
+      };
+    case 'setDraggedFiles':
+      /* eslint no-case-declarations: 0 */
+      const { isDragActive, draggedFiles } = action;
+      return {
+        ...state,
+        draggedFiles,
+        isDragActive,
+      };
+    case 'focus':
+      return {
+        ...state,
+        isFocused: true,
+      };
+    case 'blur':
+      return {
+        ...state,
+        isFocused: false,
+      };
+    case 'reset':
+      return {
+        ...initialState,
+      };
+    default:
+      return state;
+  }
+}
diff --git a/src/usePapaParse.tsx b/src/usePapaParse.tsx
new file mode 100644
index 0000000..85236f0
--- /dev/null
+++ b/src/usePapaParse.tsx
@@ -0,0 +1,11 @@
+import { readString } from './readString';
+import { readRemoteFile } from './readRemoteFile';
+import { jsonToCSV } from './jsonToCSV';
+
+export function usePapaParse() {
+  return {
+    readString,
+    readRemoteFile,
+    jsonToCSV,
+  };
+}
diff --git a/src/utils.ts b/src/utils.ts
index 02dbf8f..086c6ab 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,4 +1,10 @@
-export default function getSize(size: number) {
+// Error codes
+export const FILE_INVALID_TYPE = 'file-invalid-type';
+export const FILE_TOO_LARGE = 'file-too-large';
+export const FILE_TOO_SMALL = 'file-too-small';
+export const TOO_MANY_FILES = 'too-many-files';
+
+export function formatFileSize(size: number) {
   const sizeKb = 1024;
   const sizeMb = sizeKb * sizeKb;
   const sizeGb = sizeMb * sizeKb;
@@ -49,3 +55,195 @@ export function lightenDarkenColor(col: string, amt: number) {
   }
   return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16);
 }
+
+function isIe(userAgent: any) {
+  return (
+    userAgent.indexOf('MSIE') !== -1 || userAgent.indexOf('Trident/') !== -1
+  );
+}
+
+function isEdge(userAgent: any) {
+  return userAgent.indexOf('Edge/') !== -1;
+}
+
+export function isIeOrEdge(userAgent = window.navigator.userAgent) {
+  return isIe(userAgent) || isEdge(userAgent);
+}
+
+// React's synthetic events has event.isPropagationStopped,
+// but to remain compatibility with other libs (Preact) fall back
+// to check event.cancelBubble
+export function isPropagationStopped(event: any) {
+  if (typeof event.isPropagationStopped === 'function') {
+    return event.isPropagationStopped();
+  } else if (typeof event.cancelBubble !== 'undefined') {
+    return event.cancelBubble;
+  }
+  return false;
+}
+
+/**
+ * This is intended to be used to compose event handlers
+ * They are executed in order until one of them calls `event.isPropagationStopped()`.
+ * Note that the check is done on the first invoke too,
+ * meaning that if propagation was stopped before invoking the fns,
+ * no handlers will be executed.
+ *
+ * @param {Function} fns the event hanlder functions
+ * @return {Function} the event handler to add to an element
+ */
+export function composeEventHandlers(...fns: any[]) {
+  return (event: any, ...args: any[]) =>
+    fns.some((fn) => {
+      if (!isPropagationStopped(event) && fn) {
+        fn(event, ...args);
+      }
+      return isPropagationStopped(event);
+    });
+}
+
+export function isEventWithFiles(event: any) {
+  if (!event.dataTransfer) {
+    return !!event.target && !!event.target.files;
+  }
+  // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/types
+  // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#file
+  return Array.prototype.some.call(
+    event.dataTransfer.types,
+    (type) => type === 'Files' || type === 'application/x-moz-file',
+  );
+}
+
+/**
+ * Check if the provided file type should be accepted by the input with accept attribute.
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-accept
+ *
+ * Inspired by https://github.com/enyo/dropzone
+ *
+ * @param file {File} https://developer.mozilla.org/en-US/docs/Web/API/File
+ * @param acceptedFiles {string}
+ * @returns {boolean}
+ */
+
+export function accepts(file: any, acceptedFiles: any) {
+  if (file && acceptedFiles) {
+    const acceptedFilesArray = Array.isArray(acceptedFiles)
+      ? acceptedFiles
+      : acceptedFiles.split(',');
+    const fileName = file.name || '';
+    const mimeType = (file.type || '').toLowerCase();
+    const baseMimeType = mimeType.replace(/\/.*$/, '');
+
+    return acceptedFilesArray.some((type: any) => {
+      const validType = type.trim().toLowerCase();
+      if (validType.charAt(0) === '.') {
+        return fileName.toLowerCase().endsWith(validType);
+      } else if (validType.endsWith('/*')) {
+        // This is something like a image/* mime type
+        return baseMimeType === validType.replace(/\/.*$/, '');
+      }
+      return mimeType === validType;
+    });
+  }
+  return true;
+}
+
+// File Errors
+export const getInvalidTypeRejectionErr = (accept: any) => {
+  accept = Array.isArray(accept) && accept.length === 1 ? accept[0] : accept;
+  const messageSuffix = Array.isArray(accept)
+    ? `one of ${accept.join(', ')}`
+    : accept;
+  return {
+    code: FILE_INVALID_TYPE,
+    message: `File type must be ${messageSuffix}`,
+  };
+};
+
+// Firefox versions prior to 53 return a bogus MIME type for every file drag, so dragovers with
+// that MIME type will always be accepted
+export function fileAccepted(file: any, accept: any) {
+  const isAcceptable =
+    file.type === 'application/x-moz-file' || accepts(file, accept);
+  return [
+    isAcceptable,
+    isAcceptable ? null : getInvalidTypeRejectionErr(accept),
+  ];
+}
+
+export function fileMatchSize(file: any, minSize: any, maxSize: any) {
+  if (isDefined(file.size)) {
+    if (isDefined(minSize) && isDefined(maxSize)) {
+      if (file.size > maxSize) {
+        return [false, getTooLargeRejectionErr(maxSize)];
+      }
+      if (file.size < minSize) {
+        return [false, getTooSmallRejectionErr(minSize)];
+      }
+    } else if (isDefined(minSize) && file.size < minSize) {
+      return [false, getTooSmallRejectionErr(minSize)];
+    } else if (isDefined(maxSize) && file.size > maxSize) {
+      return [false, getTooLargeRejectionErr(maxSize)];
+    }
+  }
+  return [true, null];
+}
+
+function isDefined(value: any) {
+  return value !== undefined && value !== null;
+}
+
+export const getTooLargeRejectionErr = (maxSize: any) => {
+  return {
+    code: FILE_TOO_LARGE,
+    message: `File is larger than ${maxSize} bytes`,
+  };
+};
+
+export const getTooSmallRejectionErr = (minSize: any) => {
+  return {
+    code: FILE_TOO_SMALL,
+    message: `File is smaller than ${minSize} bytes`,
+  };
+};
+
+export const TOO_MANY_FILES_REJECTION = {
+  code: TOO_MANY_FILES,
+  message: 'Too many files',
+};
+
+// allow the entire document to be a drag target
+export function onDocumentDragOver(event: any) {
+  event.preventDefault();
+}
+
+interface Params {
+  files?: any;
+  accept?: any;
+  minSize?: number;
+  maxSize?: number;
+  multiple?: any;
+  maxFiles?: any;
+}
+
+export function allFilesAccepted({
+  files,
+  accept,
+  minSize,
+  maxSize,
+  multiple,
+  maxFiles,
+}: Params) {
+  if (
+    (!multiple && files.length > 1) ||
+    (multiple && maxFiles >= 1 && files.length > maxFiles)
+  ) {
+    return false;
+  }
+
+  return files.every((file: any) => {
+    const [accepted] = fileAccepted(file, accept);
+    const [sizeMatch] = fileMatchSize(file, minSize, maxSize);
+    return accepted && sizeMatch;
+  });
+}
diff --git a/supports/create-next-app/pages/index.tsx b/supports/create-next-app/pages/index.tsx
index 77fc040..128aa32 100644
--- a/supports/create-next-app/pages/index.tsx
+++ b/supports/create-next-app/pages/index.tsx
@@ -1,164 +1,19 @@
-import React, { useState } from 'react'
-import { CSVReader, CSVDownloader, readString } from 'react-papaparse'
+import React from 'react';
 
-export default function Home() {
-  const [isReset, setIsReset] = useState<boolean>(false);
+import { usePapaParse } from 'react-papaparse';
 
-  const handleReset = () => {
-    setIsReset(!isReset)
-  }
+export default function ReadRemoteFile() {
+  const { readRemoteFile } = usePapaParse();
 
-  const handleOnDrop = (data: any) => {
-    console.log('---------------------------')
-    console.log(data)
-    console.log('---------------------------')
-  }
-
-  const handleOnError = (
-    err: any,
-    // file,
-    // inputElem,
-    // reason
-  ) => {
-    console.log(err)
-  }
-
-  const handleOnRemoveFile = (data: any) => {
-    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,
+  const handleReadRemoteFile = () => {
+    readRemoteFile('https://react-papaparse.js.org/static/csv/normal.csv', {
       complete: (results) => {
         console.log('---------------------------');
-        console.log(results);
+        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>
-    </>
-  )
-}
+  return <button onClick={() => handleReadRemoteFile()}>readRemoteFile</button>;
+}
\ No newline at end of file
diff --git a/test/CSVReader.spec.tsx b/test/CSVReader.spec.tsx
index 3151080..c23eabc 100644
--- a/test/CSVReader.spec.tsx
+++ b/test/CSVReader.spec.tsx
@@ -1,17 +1,21 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import React from 'react';
-import expect from 'expect';
+// import expect from 'expect';
 import CustomReader from './CustomReader';
 import renderer from 'react-test-renderer';
 
 // eslint-disable-next-line no-undef
 describe('CSVReader', () => {
   // eslint-disable-next-line no-undef
-  it('should match snapshot', function () {
-    const handleFileUploaded = jest.fn().mockImplementation();
+  it('should match snapshot', async function () {
+    const handleUploadAccepted = jest.fn().mockImplementation();
     const tree = renderer
       .create(
         <CustomReader
-          onFileLoaded={handleFileUploaded}
+          onUploadAccepted={handleUploadAccepted}
           label="Chargez votre offre"
         />
       )
diff --git a/test/CustomReader.tsx b/test/CustomReader.tsx
index 479b500..5413b3a 100644
--- a/test/CustomReader.tsx
+++ b/test/CustomReader.tsx
@@ -1,19 +1,42 @@
 import React from 'react';
-import { CSVReader } from '../src/react-papaparse';
+import { useCSVReader } from '../src/react-papaparse';
 
 interface CustomReaderProps {
-  onFileLoaded?: ((data: any, file?: any) => void) | undefined;
+  onUploadAccepted?: ((data: any, file?: any) => void) | undefined;
   label: string;
 }
 
 const CustomReader: React.FC<CustomReaderProps> = (
   props: CustomReaderProps
 ) => {
-  const { onFileLoaded, label } = props;
+  const { CSVReader } = useCSVReader();
+  const { onUploadAccepted, label } = props;
 
   return (
-    <CSVReader onFileLoad={onFileLoaded}>
-      <span>{label}</span>
+    <CSVReader
+      onUploadAccepted={onUploadAccepted}
+    >
+      {({
+        getRootProps,
+        acceptedFile,
+        ProgressBar,
+        getRemoveFileProps,
+      }: any) => (
+        <>
+          <div>
+            <button type='button' {...getRootProps()}>
+              {label}
+            </button>
+            <div>
+              {acceptedFile && acceptedFile.name}
+            </div>
+            <button {...getRemoveFileProps()}>
+              Remove
+            </button>
+          </div>
+          <ProgressBar />
+        </>
+      )}
     </CSVReader>
   );
 };
diff --git a/test/__snapshots__/CSVReader.spec.tsx.snap b/test/__snapshots__/CSVReader.spec.tsx.snap
index 67ff1f9..1484542 100644
--- a/test/__snapshots__/CSVReader.spec.tsx.snap
+++ b/test/__snapshots__/CSVReader.spec.tsx.snap
@@ -4,35 +4,52 @@ exports[`CSVReader should match snapshot 1`] = `
 Array [
   <input
     accept="text/csv, .csv, application/vnd.ms-excel"
+    autoComplete="off"
+    multiple={false}
     onChange={[Function]}
+    onClick={[Function]}
     style={
       Object {
         "display": "none",
       }
     }
+    tabIndex={-1}
     type="file"
   />,
-  <div
-    onClick={[Function]}
+  <div>
+    <button
+      onBlur={[Function]}
+      onClick={[Function]}
+      onDragEnter={[Function]}
+      onDragLeave={[Function]}
+      onDragOver={[Function]}
+      onDrop={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="button"
+    >
+      Chargez votre offre
+    </button>
+    <div />
+    <button
+      onClick={[Function]}
+    >
+      Remove
+    </button>
+  </div>,
+  <span
     style={
       Object {
-        "alignItems": "center",
-        "borderColor": "#CCC",
-        "borderRadius": 20,
-        "borderStyle": "dashed",
-        "borderWidth": 2,
-        "cursor": "pointer",
-        "display": "flex",
-        "flexDirection": "column",
-        "height": "100%",
-        "justifyContent": "center",
-        "padding": 20,
+        "backgroundColor": "#659cef",
+        "borderRadius": 3,
+        "bottom": 14,
+        "boxShadow": "inset 0 1px 3px rgba(0, 0, 0, .2)",
+        "display": "none",
+        "height": 10,
+        "transition": "width 500ms ease-in-out",
+        "width": "0%",
       }
     }
-  >
-    <span>
-      Chargez votre offre
-    </span>
-  </div>,
+  />,
 ]
 `;
diff --git a/test/utils.spec.ts b/test/utils.spec.ts
index de4cd30..884baf7 100644
--- a/test/utils.spec.ts
+++ b/test/utils.spec.ts
@@ -1,11 +1,11 @@
 import expect from 'expect'
-import getSize from '../src/utils'
+import { formatFileSize } from '../src/utils'
 
 // eslint-disable-next-line no-undef
 describe('util', () => {
   // eslint-disable-next-line no-undef
   it('should return 1 KB', function() {
-    const strSize = getSize(1000)
+    const strSize = formatFileSize(1000)
     expect(strSize).toEqual('1 KB')
   })
 })
diff --git a/tsconfig.json b/tsconfig.json
index 87f4949..db89097 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -70,5 +70,6 @@
     "docs",
     "supports",
     "setup.ts",
+    "examples",
   ]
 }