React

Integrate TabularJS into a React application using hooks and a hidden file input to parse spreadsheet files directly in the browser.

Installation

npm install tabularjs

Basic Example

Use useRef to trigger the hidden file input and useState to store the parsed result.

import { useRef, useState } from 'react';
import tabularjs from 'tabularjs';

export default function App() {
    const [data, setData] = useState(null);
    const inputRef = useRef(null);

    const handleFile = async (e) => {
        const file = e.target.files[0];
        if (file) {
            const result = await tabularjs(file);
            setData(result);
        }
    };

    return (
        <>
            <input
                ref={inputRef}
                type="file"
                onChange={handleFile}
                style={{ display: 'none' }}
            />
            <button onClick={() => inputRef.current.click()}>
                Upload Spreadsheet
            </button>
            {data && (
                <pre>{JSON.stringify(data, null, 2)}</pre>
            )}
        </>
    );
}

TypeScript

TabularJS ships with full TypeScript types. Use TabularResult for typed state.

import { useRef, useState } from 'react';
import tabularjs, { TabularResult } from 'tabularjs';

export default function App() {
    const [data, setData] = useState<TabularResult | null>(null);
    const inputRef = useRef<HTMLInputElement>(null);

    const handleFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (file) {
            const result = await tabularjs(file);
            setData(result);
        }
    };

    return (
        <>
            <input
                ref={inputRef}
                type="file"
                onChange={handleFile}
                style={{ display: 'none' }}
            />
            <button onClick={() => inputRef.current?.click()}>
                Upload Spreadsheet
            </button>
            {data && (
                <pre>{JSON.stringify(data, null, 2)}</pre>
            )}
        </>
    );
}