From 7f34851d78af04ca701777fa120db898e62dc0b9 Mon Sep 17 00:00:00 2001
From: Berkin Anik <berkinanik@gmail.com>
Date: Fri, 24 Feb 2023 13:37:10 +0300
Subject: [PATCH 01/11] add proper element and function types

---
 src/model.tsx        |  2 +-
 src/useCSVReader.tsx | 77 +++++++++++++++++++++++++++++++-------------
 2 files changed, 56 insertions(+), 23 deletions(-)

diff --git a/src/model.tsx b/src/model.tsx
index b7971b4..5357f4c 100644
--- a/src/model.tsx
+++ b/src/model.tsx
@@ -3,7 +3,7 @@ import { ParseConfig, ParseResult, Parser } from 'papaparse';
 // 5.3 => https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/papaparse/index.d.ts
 // 5.2 => https://github.com/DefinitelyTyped/DefinitelyTyped/blob/d3737ebd9125505f7ea237b9f17f1426579a3917/types/papaparse/index.d.ts
 
-export interface CustomConfig<T = any, TInput = undefined>
+export interface CustomConfig<T = void, TInput = undefined>
   extends ParseConfig<T, TInput> {
   /**
    * * * * * * * * * *
diff --git a/src/useCSVReader.tsx b/src/useCSVReader.tsx
index 387db2d..d1f066c 100644
--- a/src/useCSVReader.tsx
+++ b/src/useCSVReader.tsx
@@ -1,10 +1,14 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, {
-  useReducer,
+  DragEventHandler,
+  FocusEventHandler,
+  HTMLAttributes,
+  KeyboardEventHandler,
+  MouseEventHandler,
   useCallback,
-  useMemo,
   useEffect,
-  ReactNode,
+  useMemo,
+  useReducer,
   useRef,
 } from 'react';
 import PapaParse, { ParseResult } from 'papaparse';
@@ -28,7 +32,13 @@ import Remove, { Props as RemoveComponentProps } from './Remove';
 const DEFAULT_ACCEPT = 'text/csv, .csv, application/vnd.ms-excel';
 
 export interface Props<T> {
-  children: (fn: any) => void | ReactNode;
+  children: (fn: {
+    getRootProps: () => HTMLAttributes<HTMLDivElement>;
+    acceptedFile: File;
+    ProgressBar: React.ComponentType<ProgressBarComponentProps>;
+    getRemoveFileProps: () => HTMLAttributes<HTMLDivElement>;
+    Remove: React.ComponentType<RemoveComponentProps>;
+  }) => void | React.ReactNode;
   accept?: string;
   config?: CustomConfig<T>;
   minSize?: number;
@@ -49,17 +59,17 @@ export interface Props<T> {
   ) => void;
   onUploadRejected?: (file?: File, event?: DragEvent | Event) => void;
   validator?: (file: File) => void;
-  onDragEnter?: (event?: DragEvent) => void;
-  onDragOver?: (event?: DragEvent) => void;
-  onDragLeave?: (event?: DragEvent) => void;
+  onDragEnter?: (event: DragEvent) => void;
+  onDragOver?: (event: DragEvent) => void;
+  onDragLeave?: (event: DragEvent) => void;
 }
 
-export interface ProgressBarComponentProp {
-  style?: any;
+export interface ProgressBarComponentProps {
+  style?: React.CSSProperties;
   className?: string;
 }
 
-function useCSVReaderComponent<T = any>() {
+function useCSVReaderComponent<T = void>() {
   const CSVReaderComponent = ({
     children,
     accept = DEFAULT_ACCEPT,
@@ -82,8 +92,8 @@ function useCSVReaderComponent<T = any>() {
     onDragOver,
     onDragLeave,
   }: Props<T>) => {
-    const inputRef: any = useRef<ReactNode>(null);
-    const rootRef: any = useRef<ReactNode>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const rootRef = useRef<HTMLDivElement>(null);
     const dragTargetsRef = useRef([]);
 
     const [state, dispatch] = useReducer(reducer, initialState);
@@ -96,7 +106,10 @@ function useCSVReaderComponent<T = any>() {
     } = state;
 
     const onDocumentDrop = (event: DragEvent) => {
-      if (rootRef.current && rootRef.current.contains(event.target)) {
+      if (
+        rootRef.current &&
+        rootRef.current.contains(event.target as Element)
+      ) {
         // If we intercepted an event for our instance, let it propagate down to the instance's onDrop handler
         return;
       }
@@ -154,7 +167,7 @@ function useCSVReaderComponent<T = any>() {
       });
     };
 
-    const ProgressBarComponent = (props: ProgressBarComponentProp) => {
+    const ProgressBarComponent = (props: ProgressBarComponentProps) => {
       return (
         <ProgressBar
           display={displayProgressBar}
@@ -182,7 +195,7 @@ function useCSVReaderComponent<T = any>() {
     const openFileDialog = useCallback(() => {
       if (inputRef.current && state.displayProgressBar) {
         dispatch({ type: 'openDialog' });
-        inputRef.current.value = null;
+        inputRef.current.files = null;
         inputRef.current.click();
       }
     }, [dispatch]);
@@ -195,7 +208,7 @@ function useCSVReaderComponent<T = any>() {
           if (inputRef.current) {
             const { files } = inputRef.current;
 
-            if (!files.length) {
+            if (!files || !files.length) {
               dispatch({ type: 'closeDialog' });
             }
           }
@@ -467,7 +480,10 @@ function useCSVReaderComponent<T = any>() {
     const onKeyDownCb = useCallback(
       (event: KeyboardEvent) => {
         // Ignore keyboard events bubbling up the DOM tree
-        if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {
+        if (
+          !rootRef.current ||
+          !rootRef.current.isEqualNode(event.target as Element)
+        ) {
           return;
         }
 
@@ -501,6 +517,15 @@ function useCSVReaderComponent<T = any>() {
           onDragEnter = () => {},
           // refKey = rootRef,
           ...rest
+        }: {
+          onClick?: MouseEventHandler<HTMLDivElement>;
+          onDrop?: DragEventHandler<HTMLDivElement>;
+          onDragEnter?: DragEventHandler<HTMLDivElement>;
+          onDragLeave?: DragEventHandler<HTMLDivElement>;
+          onDragOver?: DragEventHandler<HTMLDivElement>;
+          onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+          onFocus?: FocusEventHandler<HTMLDivElement>;
+          onBlur?: FocusEventHandler<HTMLDivElement>;
         } = {}) => ({
           onClick: composeHandler(composeEventHandlers(onClick, onClickCb)),
           onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb)),
@@ -576,7 +601,9 @@ function useCSVReaderComponent<T = any>() {
     // ===========
 
     const removeFileProgrammaticallyCb = useCallback((event: Event) => {
-      inputRef.current.value = '';
+      if (inputRef.current) {
+        inputRef.current.files = null;
+      }
       dispatch({ type: 'reset' });
       // To prevent a parents onclick event from firing when a child is clicked
       event.stopPropagation();
@@ -584,7 +611,10 @@ function useCSVReaderComponent<T = any>() {
 
     const getRemoveFileProps = useMemo(
       () =>
-        ({ onClick = () => {}, ...rest } = {}) => ({
+        ({
+          onClick = () => {},
+          ...rest
+        }: { onClick?: MouseEventHandler<HTMLElement> } = {}) => ({
           onClick: composeHandler(
             composeEventHandlers(onClick, removeFileProgrammaticallyCb),
           ),
@@ -601,13 +631,16 @@ function useCSVReaderComponent<T = any>() {
     );
   };
 
-  const CSVReader = useMemo(() => CSVReaderComponent, []) as any;
+  const CSVReader = useMemo(
+    () => CSVReaderComponent,
+    [],
+  ) as React.ComponentType<Props<T>>;
 
   return CSVReader;
 }
 
-export function useCSVReader() {
-  const CSVReader = useCSVReaderComponent();
+export function useCSVReader<T = void>() {
+  const CSVReader = useCSVReaderComponent<T>();
 
   return {
     CSVReader,

From b2a1e594f5aa0f4977b4f9a28450a1002260c638 Mon Sep 17 00:00:00 2001
From: Berkin Anik <berkinanik@gmail.com>
Date: Fri, 24 Feb 2023 14:41:46 +0300
Subject: [PATCH 02/11] add generic element type for div or input element type

---
 src/useCSVReader.tsx | 40 +++++++++++++++++++++++-----------------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/useCSVReader.tsx b/src/useCSVReader.tsx
index d1f066c..4a69cc4 100644
--- a/src/useCSVReader.tsx
+++ b/src/useCSVReader.tsx
@@ -31,12 +31,12 @@ import Remove, { Props as RemoveComponentProps } from './Remove';
 // 'application/vnd.ms-excel' for Window 10
 const DEFAULT_ACCEPT = 'text/csv, .csv, application/vnd.ms-excel';
 
-export interface Props<T> {
+export interface Props<T, E> {
   children: (fn: {
-    getRootProps: () => HTMLAttributes<HTMLDivElement>;
+    getRootProps: () => HTMLAttributes<E>;
     acceptedFile: File;
     ProgressBar: React.ComponentType<ProgressBarComponentProps>;
-    getRemoveFileProps: () => HTMLAttributes<HTMLDivElement>;
+    getRemoveFileProps: () => HTMLAttributes<E>;
     Remove: React.ComponentType<RemoveComponentProps>;
   }) => void | React.ReactNode;
   accept?: string;
@@ -69,7 +69,10 @@ export interface ProgressBarComponentProps {
   className?: string;
 }
 
-function useCSVReaderComponent<T = void>() {
+function useCSVReaderComponent<
+  T = void,
+  E extends HTMLDivElement | HTMLButtonElement = HTMLDivElement
+>() {
   const CSVReaderComponent = ({
     children,
     accept = DEFAULT_ACCEPT,
@@ -91,9 +94,9 @@ function useCSVReaderComponent<T = void>() {
     onDragEnter,
     onDragOver,
     onDragLeave,
-  }: Props<T>) => {
+  }: Props<T, E>) => {
     const inputRef = useRef<HTMLInputElement>(null);
-    const rootRef = useRef<HTMLDivElement>(null);
+    const rootRef = useRef<E>(null);
     const dragTargetsRef = useRef([]);
 
     const [state, dispatch] = useReducer(reducer, initialState);
@@ -518,14 +521,14 @@ function useCSVReaderComponent<T = void>() {
           // refKey = rootRef,
           ...rest
         }: {
-          onClick?: MouseEventHandler<HTMLDivElement>;
-          onDrop?: DragEventHandler<HTMLDivElement>;
-          onDragEnter?: DragEventHandler<HTMLDivElement>;
-          onDragLeave?: DragEventHandler<HTMLDivElement>;
-          onDragOver?: DragEventHandler<HTMLDivElement>;
-          onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
-          onFocus?: FocusEventHandler<HTMLDivElement>;
-          onBlur?: FocusEventHandler<HTMLDivElement>;
+          onClick?: MouseEventHandler<E>;
+          onDrop?: DragEventHandler<E>;
+          onDragEnter?: DragEventHandler<E>;
+          onDragLeave?: DragEventHandler<E>;
+          onDragOver?: DragEventHandler<E>;
+          onKeyDown?: KeyboardEventHandler<E>;
+          onFocus?: FocusEventHandler<E>;
+          onBlur?: FocusEventHandler<E>;
         } = {}) => ({
           onClick: composeHandler(composeEventHandlers(onClick, onClickCb)),
           onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb)),
@@ -634,13 +637,16 @@ function useCSVReaderComponent<T = void>() {
   const CSVReader = useMemo(
     () => CSVReaderComponent,
     [],
-  ) as React.ComponentType<Props<T>>;
+  ) as React.ComponentType<Props<T, E>>;
 
   return CSVReader;
 }
 
-export function useCSVReader<T = void>() {
-  const CSVReader = useCSVReaderComponent<T>();
+export function useCSVReader<
+  T = void,
+  E extends HTMLDivElement | HTMLButtonElement = HTMLDivElement
+>() {
+  const CSVReader = useCSVReaderComponent<T, E>();
 
   return {
     CSVReader,

From 560d216de9d0e38384145ab281d129cf440f1b0f Mon Sep 17 00:00:00 2001
From: Berkin Anik <berkinanik@gmail.com>
Date: Fri, 24 Feb 2023 14:46:34 +0300
Subject: [PATCH 03/11] update example and use cases with proper type inference

---
 README.md                                     | 37 ++++++++-----------
 docs/src/components/screens/docs/CSVToJSON.js | 28 +++++++-------
 .../components/screens/indexes/LocalFile.js   | 30 +++++++--------
 examples/CSVReaderBasicUpload.tsx             | 11 ++----
 examples/CSVReaderClickAndDragUpload.tsx      |  8 ++--
 examples/CSVReaderClickNoDragUpload.tsx       |  8 ++--
 examples/CSVReaderDragNoClickUpload.tsx       |  8 ++--
 supports/create-next-app/pages/index.tsx      |  8 ++--
 test/CustomReader.tsx                         | 21 +++--------
 9 files changed, 69 insertions(+), 90 deletions(-)

diff --git a/README.md b/README.md
index 7fe6521..c7ccc7b 100644
--- a/README.md
+++ b/README.md
@@ -94,25 +94,20 @@ const styles = {
 };
 
 export default function CSVReader() {
-  const { CSVReader } = useCSVReader();
+  const { CSVReader } = useCSVReader<void, HTMLButtonElement>();
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
       }}
     >
-      {({
-        getRootProps,
-        acceptedFile,
-        ProgressBar,
-        getRemoveFileProps,
-      }: any) => (
+      {({ getRootProps, acceptedFile, ProgressBar, getRemoveFileProps }) => (
         <>
           <div style={styles.csvReader}>
-            <button type='button' {...getRootProps()} style={styles.browseFile}>
+            <button type="button" {...getRootProps()} style={styles.browseFile}>
               Browse file
             </button>
             <div style={styles.acceptedFile}>
@@ -225,7 +220,7 @@ export default function CSVReader() {
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
@@ -246,7 +241,7 @@ export default function CSVReader() {
         ProgressBar,
         getRemoveFileProps,
         Remove,
-      }: any) => (
+      }) => (
         <>
           <div
             {...getRootProps()}
@@ -271,11 +266,11 @@ export default function CSVReader() {
                   <div
                     {...getRemoveFileProps()}
                     style={styles.remove}
-                    onMouseOver={(event: Event) => {
+                    onMouseOver={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                     }}
-                    onMouseOut={(event: Event) => {
+                    onMouseOut={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                     }}
@@ -390,7 +385,7 @@ export default function CSVReader() {
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
@@ -412,7 +407,7 @@ export default function CSVReader() {
         ProgressBar,
         getRemoveFileProps,
         Remove,
-      }: any) => (
+      }) => (
         <>
           <div
             {...getRootProps()}
@@ -437,11 +432,11 @@ export default function CSVReader() {
                   <div
                     {...getRemoveFileProps()}
                     style={styles.remove}
-                    onMouseOver={(event: Event) => {
+                    onMouseOver={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                     }}
-                    onMouseOut={(event: Event) => {
+                    onMouseOut={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                     }}
@@ -556,7 +551,7 @@ export default function CSVReader() {
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
@@ -578,7 +573,7 @@ export default function CSVReader() {
         ProgressBar,
         getRemoveFileProps,
         Remove,
-      }: any) => (
+      }) => (
         <>
           <div
             {...getRootProps()}
@@ -603,11 +598,11 @@ export default function CSVReader() {
                   <div
                     {...getRemoveFileProps()}
                     style={styles.remove}
-                    onMouseOver={(event: Event) => {
+                    onMouseOver={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                     }}
-                    onMouseOut={(event: Event) => {
+                    onMouseOut={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                     }}
diff --git a/docs/src/components/screens/docs/CSVToJSON.js b/docs/src/components/screens/docs/CSVToJSON.js
index e3cbb4f..1c28eef 100644
--- a/docs/src/components/screens/docs/CSVToJSON.js
+++ b/docs/src/components/screens/docs/CSVToJSON.js
@@ -64,7 +64,7 @@ const CSVToJSON = () => {
           <pre>
             <code className="language-javascript">
               {`<CSVReader
-  onUploadAccepted={(results: any) => {
+  onUploadAccepted={(results) => {
     console.log('---------------------------');
     console.log(results);
     console.log('---------------------------');
@@ -75,7 +75,7 @@ const CSVToJSON = () => {
     acceptedFile,
     ProgressBar,
     getRemoveFileProps,
-  }: any) => (
+  }) => (
     <>
       <div style={styles.csvReader}>
         <button type='button' {...getRootProps()} style={styles.browseFile}>
@@ -135,7 +135,7 @@ const CSVToJSON = () => {
           <pre>
             <code className="language-javascript">
               {`<CSVReader
-  onUploadAccepted={(results: any) => {
+  onUploadAccepted={(results) => {
     console.log('---------------------------');
     console.log(results);
     console.log('---------------------------');
@@ -156,7 +156,7 @@ const CSVToJSON = () => {
     ProgressBar,
     getRemoveFileProps,
     Remove,
-  }: any) => (
+  }) => (
     <>
       <div
         {...getRootProps()}
@@ -181,11 +181,11 @@ const CSVToJSON = () => {
               <div
                 {...getRemoveFileProps()}
                 style={styles.remove}
-                onMouseOver={(event: Event) => {
+                onMouseOver={(event) => {
                   event.preventDefault();
                   setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                 }}
-                onMouseOut={(event: Event) => {
+                onMouseOut={(event) => {
                   event.preventDefault();
                   setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                 }}
@@ -239,7 +239,7 @@ const CSVToJSON = () => {
           <pre>
             <code className="language-javascript">
               {`<CSVReader
-  onUploadAccepted={(results: any) => {
+  onUploadAccepted={(results) => {
     console.log('---------------------------');
     console.log(results);
     console.log('---------------------------');
@@ -261,7 +261,7 @@ const CSVToJSON = () => {
     ProgressBar,
     getRemoveFileProps,
     Remove,
-  }: any) => (
+  }) => (
     <>
       <div
         {...getRootProps()}
@@ -286,11 +286,11 @@ const CSVToJSON = () => {
               <div
                 {...getRemoveFileProps()}
                 style={styles.remove}
-                onMouseOver={(event: Event) => {
+                onMouseOver={(event) => {
                   event.preventDefault();
                   setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                 }}
-                onMouseOut={(event: Event) => {
+                onMouseOut={(event) => {
                   event.preventDefault();
                   setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                 }}
@@ -348,7 +348,7 @@ const CSVToJSON = () => {
           <pre>
             <code className="language-javascript">
               {`<CSVReader
-  onUploadAccepted={(results: any) => {
+  onUploadAccepted={(results) => {
     console.log('---------------------------');
     console.log(results);
     console.log('---------------------------');
@@ -370,7 +370,7 @@ const CSVToJSON = () => {
     ProgressBar,
     getRemoveFileProps,
     Remove,
-  }: any) => (
+  }) => (
     <>
       <div
         {...getRootProps()}
@@ -395,11 +395,11 @@ const CSVToJSON = () => {
               <div
                 {...getRemoveFileProps()}
                 style={styles.remove}
-                onMouseOver={(event: Event) => {
+                onMouseOver={(event) => {
                   event.preventDefault();
                   setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                 }}
-                onMouseOut={(event: Event) => {
+                onMouseOut={(event) => {
                   event.preventDefault();
                   setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                 }}
diff --git a/docs/src/components/screens/indexes/LocalFile.js b/docs/src/components/screens/indexes/LocalFile.js
index 030b5ab..76434bd 100644
--- a/docs/src/components/screens/indexes/LocalFile.js
+++ b/docs/src/components/screens/indexes/LocalFile.js
@@ -71,11 +71,11 @@ const styles = {
 };
 
 export default function CSVReader() {
-  const { CSVReader } = useCSVReader();
+  const { CSVReader } = useCSVReader<void, HTMLButtonElement>();
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
@@ -86,7 +86,7 @@ export default function CSVReader() {
         acceptedFile,
         ProgressBar,
         getRemoveFileProps,
-      }: any) => (
+      }) => (
         <>
           <div style={styles.csvReader}>
             <button type='button' {...getRootProps()} style={styles.browseFile}>
@@ -227,7 +227,7 @@ export default function CSVReader() {
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
@@ -248,7 +248,7 @@ export default function CSVReader() {
         ProgressBar,
         getRemoveFileProps,
         Remove,
-      }: any) => (
+      }) => (
         <>
           <div
             {...getRootProps()}
@@ -273,11 +273,11 @@ export default function CSVReader() {
                   <div
                     {...getRemoveFileProps()}
                     style={styles.remove}
-                    onMouseOver={(event: Event) => {
+                    onMouseOver={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                     }}
-                    onMouseOut={(event: Event) => {
+                    onMouseOut={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                     }}
@@ -417,7 +417,7 @@ export default function CSVReader() {
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
@@ -439,7 +439,7 @@ export default function CSVReader() {
         ProgressBar,
         getRemoveFileProps,
         Remove,
-      }: any) => (
+      }) => (
         <>
           <div
             {...getRootProps()}
@@ -464,11 +464,11 @@ export default function CSVReader() {
                   <div
                     {...getRemoveFileProps()}
                     style={styles.remove}
-                    onMouseOver={(event: Event) => {
+                    onMouseOver={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                     }}
-                    onMouseOut={(event: Event) => {
+                    onMouseOut={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                     }}
@@ -608,7 +608,7 @@ export default function CSVReader() {
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
@@ -630,7 +630,7 @@ export default function CSVReader() {
         ProgressBar,
         getRemoveFileProps,
         Remove,
-      }: any) => (
+      }) => (
         <>
           <div
             {...getRootProps()}
@@ -655,11 +655,11 @@ export default function CSVReader() {
                   <div
                     {...getRemoveFileProps()}
                     style={styles.remove}
-                    onMouseOver={(event: Event) => {
+                    onMouseOver={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                     }}
-                    onMouseOut={(event: Event) => {
+                    onMouseOut={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                     }}
diff --git a/examples/CSVReaderBasicUpload.tsx b/examples/CSVReaderBasicUpload.tsx
index d791f7b..331fc5f 100644
--- a/examples/CSVReaderBasicUpload.tsx
+++ b/examples/CSVReaderBasicUpload.tsx
@@ -28,22 +28,17 @@ const styles = {
 };
 
 export default function CSVReader() {
-  const { CSVReader } = useCSVReader();
+  const { CSVReader } = useCSVReader<void, HTMLButtonElement>();
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
       }}
     >
-      {({
-        getRootProps,
-        acceptedFile,
-        ProgressBar,
-        getRemoveFileProps,
-      }: any) => (
+      {({ getRootProps, acceptedFile, ProgressBar, getRemoveFileProps }) => (
         <>
           <div style={styles.csvReader}>
             <button type='button' {...getRootProps()} style={styles.browseFile}>
diff --git a/examples/CSVReaderClickAndDragUpload.tsx b/examples/CSVReaderClickAndDragUpload.tsx
index bc527ed..cf11378 100644
--- a/examples/CSVReaderClickAndDragUpload.tsx
+++ b/examples/CSVReaderClickAndDragUpload.tsx
@@ -88,7 +88,7 @@ export default function CSVReader() {
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
@@ -109,7 +109,7 @@ export default function CSVReader() {
         ProgressBar,
         getRemoveFileProps,
         Remove,
-      }: any) => (
+      }) => (
         <>
           <div
             {...getRootProps()}
@@ -134,11 +134,11 @@ export default function CSVReader() {
                   <div
                     {...getRemoveFileProps()}
                     style={styles.remove}
-                    onMouseOver={(event: Event) => {
+                    onMouseOver={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                     }}
-                    onMouseOut={(event: Event) => {
+                    onMouseOut={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                     }}
diff --git a/examples/CSVReaderClickNoDragUpload.tsx b/examples/CSVReaderClickNoDragUpload.tsx
index 851823c..cb25ae9 100644
--- a/examples/CSVReaderClickNoDragUpload.tsx
+++ b/examples/CSVReaderClickNoDragUpload.tsx
@@ -88,7 +88,7 @@ export default function CSVReader() {
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
@@ -110,7 +110,7 @@ export default function CSVReader() {
         ProgressBar,
         getRemoveFileProps,
         Remove,
-      }: any) => (
+      }) => (
         <>
           <div
             {...getRootProps()}
@@ -135,11 +135,11 @@ export default function CSVReader() {
                   <div
                     {...getRemoveFileProps()}
                     style={styles.remove}
-                    onMouseOver={(event: Event) => {
+                    onMouseOver={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                     }}
-                    onMouseOut={(event: Event) => {
+                    onMouseOut={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                     }}
diff --git a/examples/CSVReaderDragNoClickUpload.tsx b/examples/CSVReaderDragNoClickUpload.tsx
index dee2d53..baf993f 100644
--- a/examples/CSVReaderDragNoClickUpload.tsx
+++ b/examples/CSVReaderDragNoClickUpload.tsx
@@ -88,7 +88,7 @@ export default function CSVReader() {
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
@@ -110,7 +110,7 @@ export default function CSVReader() {
         ProgressBar,
         getRemoveFileProps,
         Remove,
-      }: any) => (
+      }) => (
         <>
           <div
             {...getRootProps()}
@@ -135,11 +135,11 @@ export default function CSVReader() {
                   <div
                     {...getRemoveFileProps()}
                     style={styles.remove}
-                    onMouseOver={(event: Event) => {
+                    onMouseOver={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                     }}
-                    onMouseOut={(event: Event) => {
+                    onMouseOut={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                     }}
diff --git a/supports/create-next-app/pages/index.tsx b/supports/create-next-app/pages/index.tsx
index bc527ed..cf11378 100644
--- a/supports/create-next-app/pages/index.tsx
+++ b/supports/create-next-app/pages/index.tsx
@@ -88,7 +88,7 @@ export default function CSVReader() {
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
@@ -109,7 +109,7 @@ export default function CSVReader() {
         ProgressBar,
         getRemoveFileProps,
         Remove,
-      }: any) => (
+      }) => (
         <>
           <div
             {...getRootProps()}
@@ -134,11 +134,11 @@ export default function CSVReader() {
                   <div
                     {...getRemoveFileProps()}
                     style={styles.remove}
-                    onMouseOver={(event: Event) => {
+                    onMouseOver={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                     }}
-                    onMouseOut={(event: Event) => {
+                    onMouseOut={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                     }}
diff --git a/test/CustomReader.tsx b/test/CustomReader.tsx
index 5413b3a..efd0ecb 100644
--- a/test/CustomReader.tsx
+++ b/test/CustomReader.tsx
@@ -9,30 +9,19 @@ interface CustomReaderProps {
 const CustomReader: React.FC<CustomReaderProps> = (
   props: CustomReaderProps
 ) => {
-  const { CSVReader } = useCSVReader();
+  const { CSVReader } = useCSVReader<void, HTMLButtonElement>();
   const { onUploadAccepted, label } = props;
 
   return (
-    <CSVReader
-      onUploadAccepted={onUploadAccepted}
-    >
-      {({
-        getRootProps,
-        acceptedFile,
-        ProgressBar,
-        getRemoveFileProps,
-      }: any) => (
+    <CSVReader onUploadAccepted={onUploadAccepted}>
+      {({ getRootProps, acceptedFile, ProgressBar, getRemoveFileProps }) => (
         <>
           <div>
             <button type='button' {...getRootProps()}>
               {label}
             </button>
-            <div>
-              {acceptedFile && acceptedFile.name}
-            </div>
-            <button {...getRemoveFileProps()}>
-              Remove
-            </button>
+            <div>{acceptedFile && acceptedFile.name}</div>
+            <button {...getRemoveFileProps()}>Remove</button>
           </div>
           <ProgressBar />
         </>

From c9d20fbbda0c69abcd607e15c8a9d5af54e5c06e Mon Sep 17 00:00:00 2001
From: Berkin Anik <berkinanik@gmail.com>
Date: Fri, 24 Feb 2023 14:49:53 +0300
Subject: [PATCH 04/11] refactor css property type definitions and add types to
 style props

---
 README.md                                     | 88 +++++++++----------
 .../components/screens/indexes/LocalFile.js   | 80 ++++++++---------
 examples/CSVReaderBasicUpload.tsx             | 14 +--
 examples/CSVReaderClickAndDragUpload.tsx      | 22 ++---
 examples/CSVReaderClickNoDragUpload.tsx       | 22 ++---
 examples/CSVReaderDragNoClickUpload.tsx       | 22 ++---
 src/ProgressBar.tsx                           | 12 +--
 src/useCSVDownloader.tsx                      |  2 +-
 supports/create-next-app/pages/index.tsx      | 22 ++---
 9 files changed, 142 insertions(+), 142 deletions(-)

diff --git a/README.md b/README.md
index c7ccc7b..619b395 100644
--- a/README.md
+++ b/README.md
@@ -63,34 +63,34 @@ To learn how to use react-papaparse:
 
 ![basic-upload](https://react-papaparse.github.io/static/images/csvreader1.png)
 
-```javascript
-import React, { CSSProperties } from 'react';
+```typescript
+import React from 'react';
 
 import { useCSVReader } from 'react-papaparse';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   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() {
@@ -129,8 +129,8 @@ export default function CSVReader() {
 
 ![click-and-drag-upload](https://react-papaparse.github.io/static/images/csvreader2.png)
 
-```javascript
-import React, { useState, CSSProperties } from 'react';
+```typescript
+import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -147,7 +147,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     border: `2px dashed ${GREY}`,
@@ -157,7 +157,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -168,47 +168,47 @@ const styles = {
     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() {
@@ -294,8 +294,8 @@ export default function CSVReader() {
 
 ![drag-no-click-upload](https://react-papaparse.github.io/static/images/csvreader3.png)
 
-```javascript
-import React, { useState, CSSProperties } from 'react';
+```typescript
+import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -312,7 +312,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     border: `2px dashed ${GREY}`,
@@ -322,7 +322,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -333,47 +333,47 @@ const styles = {
     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() {
@@ -460,8 +460,8 @@ export default function CSVReader() {
 
 ![click-no-drag-upload](https://react-papaparse.github.io/static/images/csvreader4.png)
 
-```javascript
-import React, { useState, CSSProperties } from 'react';
+```typescript
+import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -478,7 +478,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     border: `2px dashed ${GREY}`,
@@ -488,7 +488,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -499,47 +499,47 @@ const styles = {
     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() {
diff --git a/docs/src/components/screens/indexes/LocalFile.js b/docs/src/components/screens/indexes/LocalFile.js
index 76434bd..f5c9d75 100644
--- a/docs/src/components/screens/indexes/LocalFile.js
+++ b/docs/src/components/screens/indexes/LocalFile.js
@@ -41,33 +41,33 @@ const LocalFile = () => {
           </div>
           <pre>
             <code className="language-javascript">
-              {`import React, { CSSProperties } from 'react';
+              {`import React from 'react';
 
 import { useCSVReader } from 'react-papaparse';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   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() {
@@ -135,7 +135,7 @@ export default function CSVReader() {
           </div>
           <pre>
             <code className="language-javascript">
-              {`import React, { useState, CSSProperties } from 'react';
+              {`import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -152,7 +152,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     borderWidth: 2,
@@ -164,7 +164,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -175,47 +175,47 @@ const styles = {
     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() {
@@ -325,7 +325,7 @@ export default function CSVReader() {
           </div>
           <pre>
             <code className="language-javascript">
-              {`import React, { useState, CSSProperties } from 'react';
+              {`import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -342,7 +342,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     borderWidth: 2,
@@ -354,7 +354,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -365,47 +365,47 @@ const styles = {
     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() {
@@ -516,7 +516,7 @@ export default function CSVReader() {
           </div>
           <pre>
             <code className="language-javascript">
-              {`import React, { useState, CSSProperties } from 'react';
+              {`import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -533,7 +533,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     borderWidth: 2,
@@ -545,7 +545,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -556,47 +556,47 @@ const styles = {
     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() {
diff --git a/examples/CSVReaderBasicUpload.tsx b/examples/CSVReaderBasicUpload.tsx
index 331fc5f..956ed03 100644
--- a/examples/CSVReaderBasicUpload.tsx
+++ b/examples/CSVReaderBasicUpload.tsx
@@ -1,30 +1,30 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 
 import { useCSVReader } from 'react-papaparse';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   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() {
diff --git a/examples/CSVReaderClickAndDragUpload.tsx b/examples/CSVReaderClickAndDragUpload.tsx
index cf11378..c35fffb 100644
--- a/examples/CSVReaderClickAndDragUpload.tsx
+++ b/examples/CSVReaderClickAndDragUpload.tsx
@@ -1,4 +1,4 @@
-import React, { useState, CSSProperties } from 'react';
+import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -15,7 +15,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     border: `2px dashed ${GREY}`,
@@ -25,7 +25,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -36,47 +36,47 @@ const styles = {
     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() {
diff --git a/examples/CSVReaderClickNoDragUpload.tsx b/examples/CSVReaderClickNoDragUpload.tsx
index cb25ae9..8cfa06a 100644
--- a/examples/CSVReaderClickNoDragUpload.tsx
+++ b/examples/CSVReaderClickNoDragUpload.tsx
@@ -1,4 +1,4 @@
-import React, { useState, CSSProperties } from 'react';
+import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -15,7 +15,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     border: `2px dashed ${GREY}`,
@@ -25,7 +25,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -36,47 +36,47 @@ const styles = {
     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() {
diff --git a/examples/CSVReaderDragNoClickUpload.tsx b/examples/CSVReaderDragNoClickUpload.tsx
index baf993f..0deacfd 100644
--- a/examples/CSVReaderDragNoClickUpload.tsx
+++ b/examples/CSVReaderDragNoClickUpload.tsx
@@ -1,4 +1,4 @@
-import React, { useState, CSSProperties } from 'react';
+import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -15,7 +15,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     border: `2px dashed ${GREY}`,
@@ -25,7 +25,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -36,47 +36,47 @@ const styles = {
     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() {
diff --git a/src/ProgressBar.tsx b/src/ProgressBar.tsx
index 1d13f05..8fa55a5 100644
--- a/src/ProgressBar.tsx
+++ b/src/ProgressBar.tsx
@@ -1,29 +1,29 @@
-import React, { CSSProperties, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 
 const DEFAULT_PROGRESS_BAR_COLOR = '#659cef';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   progressBar: {
     borderRadius: 3,
     boxShadow: 'inset 0 1px 3px rgba(0, 0, 0, .2)',
     bottom: 14,
     width: '100%',
     // position: 'absolute',
-  } as CSSProperties,
+  },
   button: {
     position: 'inherit',
     width: '100%',
-  } as CSSProperties,
+  },
   fill: {
     backgroundColor: DEFAULT_PROGRESS_BAR_COLOR,
     borderRadius: 3,
     height: 10,
     transition: 'width 500ms ease-in-out',
-  } as CSSProperties,
+  },
 };
 
 interface Props {
-  style?: any;
+  style?: React.CSSProperties;
   className?: string;
   percentage: number;
   display: string;
diff --git a/src/useCSVDownloader.tsx b/src/useCSVDownloader.tsx
index 91e5610..93ece91 100644
--- a/src/useCSVDownloader.tsx
+++ b/src/useCSVDownloader.tsx
@@ -11,7 +11,7 @@ export interface Props {
   data: any;
   filename: string;
   type?: 'link' | 'button';
-  style?: any;
+  style?: React.CSSProperties;
   className?: string;
   bom?: boolean;
   config?: UnparseConfig;
diff --git a/supports/create-next-app/pages/index.tsx b/supports/create-next-app/pages/index.tsx
index cf11378..c35fffb 100644
--- a/supports/create-next-app/pages/index.tsx
+++ b/supports/create-next-app/pages/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, CSSProperties } from 'react';
+import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -15,7 +15,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     border: `2px dashed ${GREY}`,
@@ -25,7 +25,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -36,47 +36,47 @@ const styles = {
     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() {

From 093deb5968fbc37602ed9f5b1e8d0180404c7331 Mon Sep 17 00:00:00 2001
From: Berkin Anik <berkinanik@gmail.com>
Date: Fri, 24 Feb 2023 14:50:10 +0300
Subject: [PATCH 05/11] fix no result is printed on local csv file examples on
 demo page

---
 docs/src/components/screens/Demo.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/docs/src/components/screens/Demo.js b/docs/src/components/screens/Demo.js
index 6f819dd..17cb6a5 100644
--- a/docs/src/components/screens/Demo.js
+++ b/docs/src/components/screens/Demo.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 
 import { usePapaParse, useCSVReader, lightenDarkenColor, formatFileSize } from 'react-papaparse';
@@ -169,6 +169,14 @@ export default function Demo() {
   }
 ]`);
 
+  useEffect(() => {
+    if (csvData) {
+      console.log('---------------------------');
+      console.log(csvData);
+      console.log('---------------------------');
+    }
+  }, [csvData]);
+
   const handleSelect = (index) => {
     setTabIndex(index);
   };

From ca6e7867f5de52966708e28672988c0d41df084a Mon Sep 17 00:00:00 2001
From: Berkin Anik <berkinanik@gmail.com>
Date: Fri, 24 Feb 2023 15:27:10 +0300
Subject: [PATCH 06/11] add js-docs for useCSVReader hook usage with generic
 types

---
 src/useCSVReader.tsx | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/useCSVReader.tsx b/src/useCSVReader.tsx
index 4a69cc4..1ef83ab 100644
--- a/src/useCSVReader.tsx
+++ b/src/useCSVReader.tsx
@@ -642,6 +642,28 @@ function useCSVReaderComponent<
   return CSVReader;
 }
 
+/**
+ * A React hook to use the CSVReader component.
+ * @returns The CSVReader component.
+ * 
+ * @template T - The type of the parsed CSV file data result, where each key 
+ * represents a column in the CSV file and each value represents the data type.
+ * @template E - The type of the HTML element used for the input. Can be 
+ * HTMLDivElement or HTMLButtonElement. Defaults to HTMLDivElement.
+ * 
+ * @example HTMLDivElement as the input element
+ * ```tsx
+ * import { useCSVReader } from 'react-papaparse';
+ * const { CSVReader } = useCSVReader();
+ * ```
+ * @example HTMLButtonElement as the input element
+ * ```tsx
+ * import { useCSVReader } from 'react-papaparse';
+ * const { CSVReader } = useCSVReader<void, HTMLButtonElement>();
+ * ```
+ * 
+ * @see {@link https://react-papaparse.js.org/docs#local-files Usage with Local Files}
+ */
 export function useCSVReader<
   T = void,
   E extends HTMLDivElement | HTMLButtonElement = HTMLDivElement

From 9bfc302cd4369cce3fc8ec524a99982a444120c7 Mon Sep 17 00:00:00 2001
From: Berkin Anik <berkinanik@gmail.com>
Date: Sat, 25 Feb 2023 14:55:40 +0300
Subject: [PATCH 07/11] apply prettier fixes

---
 README.md                                  |  2 +-
 docs/src/components/screens/Demo.js        |  4 ++--
 src/useCSVReader.tsx                       | 14 +++++++-------
 supports/create-react-app/src/App.js       |  2 +-
 test/__snapshots__/CSVReader.spec.tsx.snap |  2 +-
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 619b395..9bc9d16 100644
--- a/README.md
+++ b/README.md
@@ -107,7 +107,7 @@ export default function CSVReader() {
       {({ getRootProps, acceptedFile, ProgressBar, getRemoveFileProps }) => (
         <>
           <div style={styles.csvReader}>
-            <button type="button" {...getRootProps()} style={styles.browseFile}>
+            <button type='button' {...getRootProps()} style={styles.browseFile}>
               Browse file
             </button>
             <div style={styles.acceptedFile}>
diff --git a/docs/src/components/screens/Demo.js b/docs/src/components/screens/Demo.js
index 17cb6a5..c9fd6ed 100644
--- a/docs/src/components/screens/Demo.js
+++ b/docs/src/components/screens/Demo.js
@@ -322,7 +322,7 @@ export default function Demo() {
                         <>
                           <div style={buttonStyles.csvReader}>
                             <button
-                              type="button"
+                              type='button'
                               {...getRootProps()}
                               style={buttonStyles.browseFile}
                             >
@@ -913,7 +913,7 @@ export default class Demo extends Component {
                               }}
                             >
                               <button
-                                type="button"
+                                type='button'
                                 onClick={this.handleOpenDialog}
                                 style={{
                                   borderRadius: 0,
diff --git a/src/useCSVReader.tsx b/src/useCSVReader.tsx
index 1ef83ab..9583ae4 100644
--- a/src/useCSVReader.tsx
+++ b/src/useCSVReader.tsx
@@ -71,7 +71,7 @@ export interface ProgressBarComponentProps {
 
 function useCSVReaderComponent<
   T = void,
-  E extends HTMLDivElement | HTMLButtonElement = HTMLDivElement
+  E extends HTMLDivElement | HTMLButtonElement = HTMLDivElement,
 >() {
   const CSVReaderComponent = ({
     children,
@@ -645,12 +645,12 @@ function useCSVReaderComponent<
 /**
  * A React hook to use the CSVReader component.
  * @returns The CSVReader component.
- * 
- * @template T - The type of the parsed CSV file data result, where each key 
+ *
+ * @template T - The type of the parsed CSV file data result, where each key
  * represents a column in the CSV file and each value represents the data type.
- * @template E - The type of the HTML element used for the input. Can be 
+ * @template E - The type of the HTML element used for the input. Can be
  * HTMLDivElement or HTMLButtonElement. Defaults to HTMLDivElement.
- * 
+ *
  * @example HTMLDivElement as the input element
  * ```tsx
  * import { useCSVReader } from 'react-papaparse';
@@ -661,12 +661,12 @@ function useCSVReaderComponent<
  * import { useCSVReader } from 'react-papaparse';
  * const { CSVReader } = useCSVReader<void, HTMLButtonElement>();
  * ```
- * 
+ *
  * @see {@link https://react-papaparse.js.org/docs#local-files Usage with Local Files}
  */
 export function useCSVReader<
   T = void,
-  E extends HTMLDivElement | HTMLButtonElement = HTMLDivElement
+  E extends HTMLDivElement | HTMLButtonElement = HTMLDivElement,
 >() {
   const CSVReader = useCSVReaderComponent<T, E>();
 
diff --git a/supports/create-react-app/src/App.js b/supports/create-react-app/src/App.js
index 6679e00..af6e421 100644
--- a/supports/create-react-app/src/App.js
+++ b/supports/create-react-app/src/App.js
@@ -122,7 +122,7 @@
 //             "Column 4": 7,
 //           },
 //         ]}
-//         type="button"
+//         type='button'
 //         filename={'filename'}
 //         config={
 //           {
diff --git a/test/__snapshots__/CSVReader.spec.tsx.snap b/test/__snapshots__/CSVReader.spec.tsx.snap
index 4abb796..ff27024 100644
--- a/test/__snapshots__/CSVReader.spec.tsx.snap
+++ b/test/__snapshots__/CSVReader.spec.tsx.snap
@@ -27,7 +27,7 @@ Array [
       onDrop={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
-      type="button"
+      type='button'
     >
       Chargez votre offre
     </button>

From 8dd45a7a4d44420bf0dcf4dcdd5b3c9017bd867a Mon Sep 17 00:00:00 2001
From: Berkin Anik <berkinanik@gmail.com>
Date: Sat, 25 Feb 2023 15:25:58 +0300
Subject: [PATCH 08/11] remove explicitly typed event: DragEvent from examples

---
 README.md                                        | 12 ++++++------
 docs/src/components/screens/docs/CSVToJSON.js    | 12 ++++++------
 docs/src/components/screens/indexes/LocalFile.js | 12 ++++++------
 examples/CSVReaderClickAndDragUpload.tsx         |  4 ++--
 examples/CSVReaderClickNoDragUpload.tsx          |  4 ++--
 examples/CSVReaderDragNoClickUpload.tsx          |  4 ++--
 supports/create-next-app/pages/index.tsx         |  4 ++--
 7 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/README.md b/README.md
index 9bc9d16..1ef1a2f 100644
--- a/README.md
+++ b/README.md
@@ -226,11 +226,11 @@ export default function CSVReader() {
         console.log('---------------------------');
         setZoneHover(false);
       }}
-      onDragOver={(event: DragEvent) => {
+      onDragOver={(event) => {
         event.preventDefault();
         setZoneHover(true);
       }}
-      onDragLeave={(event: DragEvent) => {
+      onDragLeave={(event) => {
         event.preventDefault();
         setZoneHover(false);
       }}
@@ -391,11 +391,11 @@ export default function CSVReader() {
         console.log('---------------------------');
         setZoneHover(false);
       }}
-      onDragOver={(event: DragEvent) => {
+      onDragOver={(event) => {
         event.preventDefault();
         setZoneHover(true);
       }}
-      onDragLeave={(event: DragEvent) => {
+      onDragLeave={(event) => {
         event.preventDefault();
         setZoneHover(false);
       }}
@@ -557,11 +557,11 @@ export default function CSVReader() {
         console.log('---------------------------');
         setZoneHover(false);
       }}
-      onDragOver={(event: DragEvent) => {
+      onDragOver={(event) => {
         event.preventDefault();
         setZoneHover(true);
       }}
-      onDragLeave={(event: DragEvent) => {
+      onDragLeave={(event) => {
         event.preventDefault();
         setZoneHover(false);
       }}
diff --git a/docs/src/components/screens/docs/CSVToJSON.js b/docs/src/components/screens/docs/CSVToJSON.js
index 1c28eef..dc300db 100644
--- a/docs/src/components/screens/docs/CSVToJSON.js
+++ b/docs/src/components/screens/docs/CSVToJSON.js
@@ -141,11 +141,11 @@ const CSVToJSON = () => {
     console.log('---------------------------');
     setZoneHover(false);
   }}
-  onDragOver={(event: DragEvent) => {
+  onDragOver={(event) => {
     event.preventDefault();
     setZoneHover(true);
   }}
-  onDragLeave={(event: DragEvent) => {
+  onDragLeave={(event) => {
     event.preventDefault();
     setZoneHover(false);
   }}
@@ -245,11 +245,11 @@ const CSVToJSON = () => {
     console.log('---------------------------');
     setZoneHover(false);
   }}
-  onDragOver={(event: DragEvent) => {
+  onDragOver={(event) => {
     event.preventDefault();
     setZoneHover(true);
   }}
-  onDragLeave={(event: DragEvent) => {
+  onDragLeave={(event) => {
     event.preventDefault();
     setZoneHover(false);
   }}
@@ -354,11 +354,11 @@ const CSVToJSON = () => {
     console.log('---------------------------');
     setZoneHover(false);
   }}
-  onDragOver={(event: DragEvent) => {
+  onDragOver={(event) => {
     event.preventDefault();
     setZoneHover(true);
   }}
-  onDragLeave={(event: DragEvent) => {
+  onDragLeave={(event) => {
     event.preventDefault();
     setZoneHover(false);
   }}
diff --git a/docs/src/components/screens/indexes/LocalFile.js b/docs/src/components/screens/indexes/LocalFile.js
index f5c9d75..6c9b62f 100644
--- a/docs/src/components/screens/indexes/LocalFile.js
+++ b/docs/src/components/screens/indexes/LocalFile.js
@@ -233,11 +233,11 @@ export default function CSVReader() {
         console.log('---------------------------');
         setZoneHover(false);
       }}
-      onDragOver={(event: DragEvent) => {
+      onDragOver={(event) => {
         event.preventDefault();
         setZoneHover(true);
       }}
-      onDragLeave={(event: DragEvent) => {
+      onDragLeave={(event) => {
         event.preventDefault();
         setZoneHover(false);
       }}
@@ -423,11 +423,11 @@ export default function CSVReader() {
         console.log('---------------------------');
         setZoneHover(false);
       }}
-      onDragOver={(event: DragEvent) => {
+      onDragOver={(event) => {
         event.preventDefault();
         setZoneHover(true);
       }}
-      onDragLeave={(event: DragEvent) => {
+      onDragLeave={(event) => {
         event.preventDefault();
         setZoneHover(false);
       }}
@@ -614,11 +614,11 @@ export default function CSVReader() {
         console.log('---------------------------');
         setZoneHover(false);
       }}
-      onDragOver={(event: DragEvent) => {
+      onDragOver={(event) => {
         event.preventDefault();
         setZoneHover(true);
       }}
-      onDragLeave={(event: DragEvent) => {
+      onDragLeave={(event) => {
         event.preventDefault();
         setZoneHover(false);
       }}
diff --git a/examples/CSVReaderClickAndDragUpload.tsx b/examples/CSVReaderClickAndDragUpload.tsx
index c35fffb..2881ca1 100644
--- a/examples/CSVReaderClickAndDragUpload.tsx
+++ b/examples/CSVReaderClickAndDragUpload.tsx
@@ -94,11 +94,11 @@ export default function CSVReader() {
         console.log('---------------------------');
         setZoneHover(false);
       }}
-      onDragOver={(event: DragEvent) => {
+      onDragOver={(event) => {
         event.preventDefault();
         setZoneHover(true);
       }}
-      onDragLeave={(event: DragEvent) => {
+      onDragLeave={(event) => {
         event.preventDefault();
         setZoneHover(false);
       }}
diff --git a/examples/CSVReaderClickNoDragUpload.tsx b/examples/CSVReaderClickNoDragUpload.tsx
index 8cfa06a..ea00858 100644
--- a/examples/CSVReaderClickNoDragUpload.tsx
+++ b/examples/CSVReaderClickNoDragUpload.tsx
@@ -94,11 +94,11 @@ export default function CSVReader() {
         console.log('---------------------------');
         setZoneHover(false);
       }}
-      onDragOver={(event: DragEvent) => {
+      onDragOver={(event) => {
         event.preventDefault();
         setZoneHover(true);
       }}
-      onDragLeave={(event: DragEvent) => {
+      onDragLeave={(event) => {
         event.preventDefault();
         setZoneHover(false);
       }}
diff --git a/examples/CSVReaderDragNoClickUpload.tsx b/examples/CSVReaderDragNoClickUpload.tsx
index 0deacfd..84f57ad 100644
--- a/examples/CSVReaderDragNoClickUpload.tsx
+++ b/examples/CSVReaderDragNoClickUpload.tsx
@@ -94,11 +94,11 @@ export default function CSVReader() {
         console.log('---------------------------');
         setZoneHover(false);
       }}
-      onDragOver={(event: DragEvent) => {
+      onDragOver={(event) => {
         event.preventDefault();
         setZoneHover(true);
       }}
-      onDragLeave={(event: DragEvent) => {
+      onDragLeave={(event) => {
         event.preventDefault();
         setZoneHover(false);
       }}
diff --git a/supports/create-next-app/pages/index.tsx b/supports/create-next-app/pages/index.tsx
index c35fffb..2881ca1 100644
--- a/supports/create-next-app/pages/index.tsx
+++ b/supports/create-next-app/pages/index.tsx
@@ -94,11 +94,11 @@ export default function CSVReader() {
         console.log('---------------------------');
         setZoneHover(false);
       }}
-      onDragOver={(event: DragEvent) => {
+      onDragOver={(event) => {
         event.preventDefault();
         setZoneHover(true);
       }}
-      onDragLeave={(event: DragEvent) => {
+      onDragLeave={(event) => {
         event.preventDefault();
         setZoneHover(false);
       }}

From b25ac1289a988614e82a233644e726016a96de41 Mon Sep 17 00:00:00 2001
From: Berkin Anik <berkinanik@gmail.com>
Date: Mon, 27 Feb 2023 13:58:58 +0300
Subject: [PATCH 09/11] fix clear input ref value

---
 src/useCSVReader.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/useCSVReader.tsx b/src/useCSVReader.tsx
index 9583ae4..991ea30 100644
--- a/src/useCSVReader.tsx
+++ b/src/useCSVReader.tsx
@@ -198,6 +198,7 @@ function useCSVReaderComponent<
     const openFileDialog = useCallback(() => {
       if (inputRef.current && state.displayProgressBar) {
         dispatch({ type: 'openDialog' });
+        inputRef.current.value = '';
         inputRef.current.files = null;
         inputRef.current.click();
       }
@@ -605,6 +606,7 @@ function useCSVReaderComponent<
 
     const removeFileProgrammaticallyCb = useCallback((event: Event) => {
       if (inputRef.current) {
+        inputRef.current.value = '';
         inputRef.current.files = null;
       }
       dispatch({ type: 'reset' });

From cddad8ee50dbc3be87d4ece25314a2563f0e31ae Mon Sep 17 00:00:00 2001
From: Berkin Anik <berkinanik@gmail.com>
Date: Mon, 27 Feb 2023 14:38:26 +0300
Subject: [PATCH 10/11] set parse result data type to string array default

---
 src/useCSVReader.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/useCSVReader.tsx b/src/useCSVReader.tsx
index 991ea30..5e888f2 100644
--- a/src/useCSVReader.tsx
+++ b/src/useCSVReader.tsx
@@ -70,8 +70,8 @@ export interface ProgressBarComponentProps {
 }
 
 function useCSVReaderComponent<
-  T = void,
-  E extends HTMLDivElement | HTMLButtonElement = HTMLDivElement,
+  T,
+  E extends HTMLDivElement | HTMLButtonElement,
 >() {
   const CSVReaderComponent = ({
     children,
@@ -667,7 +667,7 @@ function useCSVReaderComponent<
  * @see {@link https://react-papaparse.js.org/docs#local-files Usage with Local Files}
  */
 export function useCSVReader<
-  T = void,
+  T = string[],
   E extends HTMLDivElement | HTMLButtonElement = HTMLDivElement,
 >() {
   const CSVReader = useCSVReaderComponent<T, E>();

From 3339b6e2ecb7ed7df7b6eefd7357740e89ee506e Mon Sep 17 00:00:00 2001
From: Berkin Anik <berkinanik@gmail.com>
Date: Mon, 27 Feb 2023 14:46:04 +0300
Subject: [PATCH 11/11] update examples with generic string array data type

---
 README.md                                        | 2 +-
 docs/src/components/screens/indexes/LocalFile.js | 2 +-
 examples/CSVReaderBasicUpload.tsx                | 2 +-
 src/useCSVReader.tsx                             | 2 +-
 test/CustomReader.tsx                            | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 1ef1a2f..d683559 100644
--- a/README.md
+++ b/README.md
@@ -94,7 +94,7 @@ const styles: Record<string, React.CSSProperties> = {
 };
 
 export default function CSVReader() {
-  const { CSVReader } = useCSVReader<void, HTMLButtonElement>();
+  const { CSVReader } = useCSVReader<string[][], HTMLButtonElement>();
 
   return (
     <CSVReader
diff --git a/docs/src/components/screens/indexes/LocalFile.js b/docs/src/components/screens/indexes/LocalFile.js
index 6c9b62f..a7ddf0b 100644
--- a/docs/src/components/screens/indexes/LocalFile.js
+++ b/docs/src/components/screens/indexes/LocalFile.js
@@ -71,7 +71,7 @@ const styles: Record<string, React.CSSProperties> = {
 };
 
 export default function CSVReader() {
-  const { CSVReader } = useCSVReader<void, HTMLButtonElement>();
+  const { CSVReader } = useCSVReader<string[][], HTMLButtonElement>();
 
   return (
     <CSVReader
diff --git a/examples/CSVReaderBasicUpload.tsx b/examples/CSVReaderBasicUpload.tsx
index 956ed03..4231be0 100644
--- a/examples/CSVReaderBasicUpload.tsx
+++ b/examples/CSVReaderBasicUpload.tsx
@@ -28,7 +28,7 @@ const styles: Record<string, React.CSSProperties> = {
 };
 
 export default function CSVReader() {
-  const { CSVReader } = useCSVReader<void, HTMLButtonElement>();
+  const { CSVReader } = useCSVReader<string[][], HTMLButtonElement>();
 
   return (
     <CSVReader
diff --git a/src/useCSVReader.tsx b/src/useCSVReader.tsx
index 5e888f2..97c1e65 100644
--- a/src/useCSVReader.tsx
+++ b/src/useCSVReader.tsx
@@ -661,7 +661,7 @@ function useCSVReaderComponent<
  * @example HTMLButtonElement as the input element
  * ```tsx
  * import { useCSVReader } from 'react-papaparse';
- * const { CSVReader } = useCSVReader<void, HTMLButtonElement>();
+ * const { CSVReader } = useCSVReader<string[][], HTMLButtonElement>();
  * ```
  *
  * @see {@link https://react-papaparse.js.org/docs#local-files Usage with Local Files}
diff --git a/test/CustomReader.tsx b/test/CustomReader.tsx
index efd0ecb..104c933 100644
--- a/test/CustomReader.tsx
+++ b/test/CustomReader.tsx
@@ -9,7 +9,7 @@ interface CustomReaderProps {
 const CustomReader: React.FC<CustomReaderProps> = (
   props: CustomReaderProps
 ) => {
-  const { CSVReader } = useCSVReader<void, HTMLButtonElement>();
+  const { CSVReader } = useCSVReader<string[][], HTMLButtonElement>();
   const { onUploadAccepted, label } = props;
 
   return (