demo.html

<!DOCTYPE html>
<html>

<!-- Use `npm run demo` to view the demo -->

<head>
  <script src="node_modules/react/umd/react.development.js"></script>
  <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
  <script src="node_modules/cytoscape/dist/cytoscape.min.js"></script>
  <script src="node_modules/prop-types/prop-types.js"></script>
  <script src="dist/react-cytoscape.umd.js"></script>

  <title>react-cytoscapejs demo</title>

  <style>
    body {
      font: 14pt helvetica neue, helvetica, sans-serif;
      padding: 0;
      margin: 1em;
    }

    #root {
      display: inline-block;
    }

    #props {
      font-family: monospace;
      width: 400px;
      height: 400px;
      margin-top: 16px;
    }
  </style>
</head>

<body>
  <h1>react-cytoscapejs demo</h1>

  <div id="root"></div>
  <textarea id="props"></textarea>
  <button id="update">Render</button>

  <script>
    window.addEventListener('DOMContentLoaded', function () {
      const exampleProps = {
        id: 'cy',
        className: 'foo bar',
        style: {
          'border': '1px solid #ccc',
          'width': '400px',
          'height': '400px'
        },
        global: 'cy',
        elements: [
          { data: { id: 'a', label: 'apple' }, position: { x: 0, y: 0 } },
          { data: { id: 'b', label: 'banana' }, position: { x: 100, y: 0 } },
          { data: { id: 'c', label: 'cherry' }, position: { x: 200, y: 0 } }
        ],
        layout: {
          name: 'preset'
        }
      };

      class TestComponent extends React.Component {
        constructor(props) {
          super(props);

          props.setStateRef(this.setState.bind(this));

          this.state = exampleProps;
        }

        render() {
          return React.createElement(ReactCytoscape, this.state);
        }
      }

      const textBox = document.getElementById('props');
      const btn = document.getElementById('update');

      btn.addEventListener('click', () => {
        update(JSON.parse(textBox.value));
      });

      let update;

      ReactDOM.render(
        React.createElement(TestComponent, { setStateRef: ref => update = ref }),
        document.getElementById('root')
      );

      textBox.value = JSON.stringify(exampleProps, null, 2);
    });
  </script>
</body>

</html>