@jspreadsheet/react/dist/index.js

Jspreadsheet is a lightweight, vanilla javascript plugin to create amazing web-based interactive tables and spreadsheets compatible with other spreadsheet software.

// @ts-nocheck
import React, { useRef, useEffect  } from "react";
import jspreadsheet from 'jspreadsheet';

const extractWorksheetProperties = function(props) {
    this.worksheets.push({
        minDimensions: [10, 10],
        ...props
    });
}

if (typeof(window) !== 'undefined') {
    window.jspreadsheet = jspreadsheet;
}

// @ts-ignore
const Spreadsheet = React.forwardRef((props, mainReference) => {
    // Set the license
    if (props.license) {
        jspreadsheet.setLicense(props.license);
    }
    // Set the extensions
    if (props.extensions) {
        jspreadsheet.setExtensions(props.extensions);
    }
    // Dom element
    const jssDom = useRef(null);

    // Get the properties for the spreadsheet
    let options = { ...props };

    if (! options.worksheets) {
        // Create the worksheets
        options.worksheets = [];
        // Get all the properties from the worksheets
        if (Array.isArray(props.children)) {
            // Multiple worksheets
            props.children.map(function (v) {
                // Extract worksheet options
                extractWorksheetProperties.call(options, v.props);
            });
        } else if (props.children) {
            // Extract worksheet options
            extractWorksheetProperties.call(options, props.children.props);
        }
    }

    /*useEffect(function() {
        // Track changes in the data
        if (jssDom.current.innerText) {
            mainReference.current[0].setData(JSON.parse(JSON.stringify(options.worksheets[0].data)))
        }
    }, [options.worksheets[0].data]);*/


    useEffect(() => {
        // @ts-ignore
        if (! jssDom.current.textContent && ! mainReference.current) {
            mainReference.current = jspreadsheet(jssDom.current, options);
        }
    }, []);

    let prop = {
        ref: jssDom
    };

    if (typeof(options.id) !== 'undefined') {
        prop.id = options.id;
    }

    return React.createElement("div", prop);
})

function Worksheet () {
    return (null);
}

// @ts-ignore
const Picker = React.forwardRef((props, mainReference) => {

    // Dom element
    const jssDom = useRef(null);

    // Get the properties for the spreadsheet
    let options = { ...props };

    useEffect(() => {
        if (! jssDom.current.textContent) {
            let ret = jspreadsheet.picker(jssDom.current, options);
            if (mainReference && ! mainReference.current) {
                mainReference.current = ret;
            }
        }
    }, []);

    let prop = {
        ref: jssDom
    };

    if (typeof(options.id) !== 'undefined') {
        prop.id = options.id;
    }

    return React.createElement("div", prop);
});

export { Spreadsheet, Worksheet, Picker, jspreadsheet };