Skip to content

Commit 560d216

Browse files
committed
update example and use cases with proper type inference
1 parent b2a1e59 commit 560d216

File tree

9 files changed

+69
-90
lines changed

9 files changed

+69
-90
lines changed

README.md

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -94,25 +94,20 @@ const styles = {
9494
};
9595

9696
export default function CSVReader() {
97-
const { CSVReader } = useCSVReader();
97+
const { CSVReader } = useCSVReader<void, HTMLButtonElement>();
9898

9999
return (
100100
<CSVReader
101-
onUploadAccepted={(results: any) => {
101+
onUploadAccepted={(results) => {
102102
console.log('---------------------------');
103103
console.log(results);
104104
console.log('---------------------------');
105105
}}
106106
>
107-
{({
108-
getRootProps,
109-
acceptedFile,
110-
ProgressBar,
111-
getRemoveFileProps,
112-
}: any) => (
107+
{({ getRootProps, acceptedFile, ProgressBar, getRemoveFileProps }) => (
113108
<>
114109
<div style={styles.csvReader}>
115-
<button type='button' {...getRootProps()} style={styles.browseFile}>
110+
<button type="button" {...getRootProps()} style={styles.browseFile}>
116111
Browse file
117112
</button>
118113
<div style={styles.acceptedFile}>
@@ -225,7 +220,7 @@ export default function CSVReader() {
225220

226221
return (
227222
<CSVReader
228-
onUploadAccepted={(results: any) => {
223+
onUploadAccepted={(results) => {
229224
console.log('---------------------------');
230225
console.log(results);
231226
console.log('---------------------------');
@@ -246,7 +241,7 @@ export default function CSVReader() {
246241
ProgressBar,
247242
getRemoveFileProps,
248243
Remove,
249-
}: any) => (
244+
}) => (
250245
<>
251246
<div
252247
{...getRootProps()}
@@ -271,11 +266,11 @@ export default function CSVReader() {
271266
<div
272267
{...getRemoveFileProps()}
273268
style={styles.remove}
274-
onMouseOver={(event: Event) => {
269+
onMouseOver={(event) => {
275270
event.preventDefault();
276271
setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
277272
}}
278-
onMouseOut={(event: Event) => {
273+
onMouseOut={(event) => {
279274
event.preventDefault();
280275
setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
281276
}}
@@ -390,7 +385,7 @@ export default function CSVReader() {
390385

391386
return (
392387
<CSVReader
393-
onUploadAccepted={(results: any) => {
388+
onUploadAccepted={(results) => {
394389
console.log('---------------------------');
395390
console.log(results);
396391
console.log('---------------------------');
@@ -412,7 +407,7 @@ export default function CSVReader() {
412407
ProgressBar,
413408
getRemoveFileProps,
414409
Remove,
415-
}: any) => (
410+
}) => (
416411
<>
417412
<div
418413
{...getRootProps()}
@@ -437,11 +432,11 @@ export default function CSVReader() {
437432
<div
438433
{...getRemoveFileProps()}
439434
style={styles.remove}
440-
onMouseOver={(event: Event) => {
435+
onMouseOver={(event) => {
441436
event.preventDefault();
442437
setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
443438
}}
444-
onMouseOut={(event: Event) => {
439+
onMouseOut={(event) => {
445440
event.preventDefault();
446441
setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
447442
}}
@@ -556,7 +551,7 @@ export default function CSVReader() {
556551

557552
return (
558553
<CSVReader
559-
onUploadAccepted={(results: any) => {
554+
onUploadAccepted={(results) => {
560555
console.log('---------------------------');
561556
console.log(results);
562557
console.log('---------------------------');
@@ -578,7 +573,7 @@ export default function CSVReader() {
578573
ProgressBar,
579574
getRemoveFileProps,
580575
Remove,
581-
}: any) => (
576+
}) => (
582577
<>
583578
<div
584579
{...getRootProps()}
@@ -603,11 +598,11 @@ export default function CSVReader() {
603598
<div
604599
{...getRemoveFileProps()}
605600
style={styles.remove}
606-
onMouseOver={(event: Event) => {
601+
onMouseOver={(event) => {
607602
event.preventDefault();
608603
setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
609604
}}
610-
onMouseOut={(event: Event) => {
605+
onMouseOut={(event) => {
611606
event.preventDefault();
612607
setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
613608
}}

docs/src/components/screens/docs/CSVToJSON.js

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const CSVToJSON = () => {
6464
<pre>
6565
<code className="language-javascript">
6666
{`<CSVReader
67-
onUploadAccepted={(results: any) => {
67+
onUploadAccepted={(results) => {
6868
console.log('---------------------------');
6969
console.log(results);
7070
console.log('---------------------------');
@@ -75,7 +75,7 @@ const CSVToJSON = () => {
7575
acceptedFile,
7676
ProgressBar,
7777
getRemoveFileProps,
78-
}: any) => (
78+
}) => (
7979
<>
8080
<div style={styles.csvReader}>
8181
<button type='button' {...getRootProps()} style={styles.browseFile}>
@@ -135,7 +135,7 @@ const CSVToJSON = () => {
135135
<pre>
136136
<code className="language-javascript">
137137
{`<CSVReader
138-
onUploadAccepted={(results: any) => {
138+
onUploadAccepted={(results) => {
139139
console.log('---------------------------');
140140
console.log(results);
141141
console.log('---------------------------');
@@ -156,7 +156,7 @@ const CSVToJSON = () => {
156156
ProgressBar,
157157
getRemoveFileProps,
158158
Remove,
159-
}: any) => (
159+
}) => (
160160
<>
161161
<div
162162
{...getRootProps()}
@@ -181,11 +181,11 @@ const CSVToJSON = () => {
181181
<div
182182
{...getRemoveFileProps()}
183183
style={styles.remove}
184-
onMouseOver={(event: Event) => {
184+
onMouseOver={(event) => {
185185
event.preventDefault();
186186
setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
187187
}}
188-
onMouseOut={(event: Event) => {
188+
onMouseOut={(event) => {
189189
event.preventDefault();
190190
setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
191191
}}
@@ -239,7 +239,7 @@ const CSVToJSON = () => {
239239
<pre>
240240
<code className="language-javascript">
241241
{`<CSVReader
242-
onUploadAccepted={(results: any) => {
242+
onUploadAccepted={(results) => {
243243
console.log('---------------------------');
244244
console.log(results);
245245
console.log('---------------------------');
@@ -261,7 +261,7 @@ const CSVToJSON = () => {
261261
ProgressBar,
262262
getRemoveFileProps,
263263
Remove,
264-
}: any) => (
264+
}) => (
265265
<>
266266
<div
267267
{...getRootProps()}
@@ -286,11 +286,11 @@ const CSVToJSON = () => {
286286
<div
287287
{...getRemoveFileProps()}
288288
style={styles.remove}
289-
onMouseOver={(event: Event) => {
289+
onMouseOver={(event) => {
290290
event.preventDefault();
291291
setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
292292
}}
293-
onMouseOut={(event: Event) => {
293+
onMouseOut={(event) => {
294294
event.preventDefault();
295295
setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
296296
}}
@@ -348,7 +348,7 @@ const CSVToJSON = () => {
348348
<pre>
349349
<code className="language-javascript">
350350
{`<CSVReader
351-
onUploadAccepted={(results: any) => {
351+
onUploadAccepted={(results) => {
352352
console.log('---------------------------');
353353
console.log(results);
354354
console.log('---------------------------');
@@ -370,7 +370,7 @@ const CSVToJSON = () => {
370370
ProgressBar,
371371
getRemoveFileProps,
372372
Remove,
373-
}: any) => (
373+
}) => (
374374
<>
375375
<div
376376
{...getRootProps()}
@@ -395,11 +395,11 @@ const CSVToJSON = () => {
395395
<div
396396
{...getRemoveFileProps()}
397397
style={styles.remove}
398-
onMouseOver={(event: Event) => {
398+
onMouseOver={(event) => {
399399
event.preventDefault();
400400
setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
401401
}}
402-
onMouseOut={(event: Event) => {
402+
onMouseOut={(event) => {
403403
event.preventDefault();
404404
setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
405405
}}

docs/src/components/screens/indexes/LocalFile.js

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -71,11 +71,11 @@ const styles = {
7171
};
7272
7373
export default function CSVReader() {
74-
const { CSVReader } = useCSVReader();
74+
const { CSVReader } = useCSVReader<void, HTMLButtonElement>();
7575
7676
return (
7777
<CSVReader
78-
onUploadAccepted={(results: any) => {
78+
onUploadAccepted={(results) => {
7979
console.log('---------------------------');
8080
console.log(results);
8181
console.log('---------------------------');
@@ -86,7 +86,7 @@ export default function CSVReader() {
8686
acceptedFile,
8787
ProgressBar,
8888
getRemoveFileProps,
89-
}: any) => (
89+
}) => (
9090
<>
9191
<div style={styles.csvReader}>
9292
<button type='button' {...getRootProps()} style={styles.browseFile}>
@@ -227,7 +227,7 @@ export default function CSVReader() {
227227
228228
return (
229229
<CSVReader
230-
onUploadAccepted={(results: any) => {
230+
onUploadAccepted={(results) => {
231231
console.log('---------------------------');
232232
console.log(results);
233233
console.log('---------------------------');
@@ -248,7 +248,7 @@ export default function CSVReader() {
248248
ProgressBar,
249249
getRemoveFileProps,
250250
Remove,
251-
}: any) => (
251+
}) => (
252252
<>
253253
<div
254254
{...getRootProps()}
@@ -273,11 +273,11 @@ export default function CSVReader() {
273273
<div
274274
{...getRemoveFileProps()}
275275
style={styles.remove}
276-
onMouseOver={(event: Event) => {
276+
onMouseOver={(event) => {
277277
event.preventDefault();
278278
setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
279279
}}
280-
onMouseOut={(event: Event) => {
280+
onMouseOut={(event) => {
281281
event.preventDefault();
282282
setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
283283
}}
@@ -417,7 +417,7 @@ export default function CSVReader() {
417417
418418
return (
419419
<CSVReader
420-
onUploadAccepted={(results: any) => {
420+
onUploadAccepted={(results) => {
421421
console.log('---------------------------');
422422
console.log(results);
423423
console.log('---------------------------');
@@ -439,7 +439,7 @@ export default function CSVReader() {
439439
ProgressBar,
440440
getRemoveFileProps,
441441
Remove,
442-
}: any) => (
442+
}) => (
443443
<>
444444
<div
445445
{...getRootProps()}
@@ -464,11 +464,11 @@ export default function CSVReader() {
464464
<div
465465
{...getRemoveFileProps()}
466466
style={styles.remove}
467-
onMouseOver={(event: Event) => {
467+
onMouseOver={(event) => {
468468
event.preventDefault();
469469
setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
470470
}}
471-
onMouseOut={(event: Event) => {
471+
onMouseOut={(event) => {
472472
event.preventDefault();
473473
setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
474474
}}
@@ -608,7 +608,7 @@ export default function CSVReader() {
608608
609609
return (
610610
<CSVReader
611-
onUploadAccepted={(results: any) => {
611+
onUploadAccepted={(results) => {
612612
console.log('---------------------------');
613613
console.log(results);
614614
console.log('---------------------------');
@@ -630,7 +630,7 @@ export default function CSVReader() {
630630
ProgressBar,
631631
getRemoveFileProps,
632632
Remove,
633-
}: any) => (
633+
}) => (
634634
<>
635635
<div
636636
{...getRootProps()}
@@ -655,11 +655,11 @@ export default function CSVReader() {
655655
<div
656656
{...getRemoveFileProps()}
657657
style={styles.remove}
658-
onMouseOver={(event: Event) => {
658+
onMouseOver={(event) => {
659659
event.preventDefault();
660660
setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
661661
}}
662-
onMouseOut={(event: Event) => {
662+
onMouseOut={(event) => {
663663
event.preventDefault();
664664
setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
665665
}}

examples/CSVReaderBasicUpload.tsx

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,22 +28,17 @@ const styles = {
2828
};
2929

3030
export default function CSVReader() {
31-
const { CSVReader } = useCSVReader();
31+
const { CSVReader } = useCSVReader<void, HTMLButtonElement>();
3232

3333
return (
3434
<CSVReader
35-
onUploadAccepted={(results: any) => {
35+
onUploadAccepted={(results) => {
3636
console.log('---------------------------');
3737
console.log(results);
3838
console.log('---------------------------');
3939
}}
4040
>
41-
{({
42-
getRootProps,
43-
acceptedFile,
44-
ProgressBar,
45-
getRemoveFileProps,
46-
}: any) => (
41+
{({ getRootProps, acceptedFile, ProgressBar, getRemoveFileProps }) => (
4742
<>
4843
<div style={styles.csvReader}>
4944
<button type='button' {...getRootProps()} style={styles.browseFile}>

0 commit comments

Comments
 (0)