11import GitHubCorners from '@uiw/react-github-corners' ;
2- import { styled } from "goober" ;
32import CSVReader from '@uiw/react-csv-reader' ;
3+ import JsonView from '@uiw/react-json-view' ;
4+ import { lightTheme } from '@uiw/react-json-view/light' ;
5+ import { styled } from "goober" ;
6+ import { CSSProperties , useState } from 'react' ;
47import MarkdownPreview from './Markdown' ;
58
69const Header = styled ( 'header' ) `
@@ -25,24 +28,40 @@ const Wrappper = styled('div')`
2528 padding-bottom: 5rem;
2629` ;
2730
31+ const Examples = styled ( 'div' ) `
32+ text-align: left;
33+ display: inline-block;
34+ ` ;
2835
2936export default function App ( ) {
37+ const [ value , setValue ] = useState < any [ ] > ( [ ] ) ;
3038return (
3139< Wrappper >
3240< GitHubCorners fixed target = "__blank" zIndex = { 10 } href = "https://github.com/uiwjs/react-csv-reader" />
3341< Header >
3442< h1 >
3543 CSV Reader for React< SupVersion > v{ VERSION } </ SupVersion >
3644</ h1 >
37- < CSVReader
38- parserOptions = { {
39- // header: true,
40- // worker: true,
41- } }
42- onFileLoaded = { ( data ) => {
43- console . log ( 'data:' , data )
44- } }
45- />
45+ < Examples >
46+ < CSVReader
47+ parserOptions = { {
48+ // header: true,
49+ // worker: true,
50+ } }
51+ onFileLoaded = { ( data ) => {
52+ setValue ( data ) ;
53+ console . log ( 'data:' , data )
54+ } }
55+ />
56+ { value && value . length > 0 && (
57+ < JsonView
58+ keyName = "data"
59+ value = { value }
60+ collapsed = { false }
61+ style = { lightTheme as CSSProperties }
62+ />
63+ ) }
64+ </ Examples >
4665</ Header >
4766< MarkdownPreview />
4867</ Wrappper >