Framework Guide

React

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

Installation

bash

npm install tabularjs

Basic Example

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

App.jsxjsx

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.

App.tsxtsx

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>
            )}
        </>
    );
}