simple-react-cytoscape/dist/index.js

Simple container for Cytoscape in React Apps

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var cytoscape = require('cytoscape');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var cytoscape__default = /*#__PURE__*/_interopDefaultLegacy(cytoscape);

/**
 * Generate unique IDs for each
 * cytoscape container in the app
 */
const nextId = (() => {
    let id = 0;
    return () => {
        id += 1;
        return `simple-react-cytoscape-${id}`;
    };
})();
const SimpleReactCytoscape = ({ options, cyCallback: getCy, }) => {
    const [cy, setCy] = react.useState();
    const id = react.useMemo(nextId, []);
    react.useEffect(() => {
        if (!cy) {
            let container;
            try {
                container = document.getElementById(id) || undefined;
            }
            catch (e) {
                // Might be running Headless (the unit test are headless)
                container = undefined;
            }
            const newCy = cytoscape__default['default'](Object.assign(Object.assign({}, options), { container }));
            setCy(newCy);
            // If a callback was supplied we can now return the value
            if (getCy) {
                getCy(newCy);
            }
        }
    }, [cy, getCy, id, options]);
    return jsxRuntime.jsx("div", { id: id, className: "simple-react-cytoscape" }, void 0);
};

exports.SimpleReactCytoscape = SimpleReactCytoscape;