v0.4.0 🌈

🚀 Features

• Web Module @kamiazya (#68)

Web Module

The Graphviz component of @ts-graphviz/react/web can be rendered directly in the browser.

Since this component uses the function of @hpcc-js/wasm internally, it is necessary to host @hpcc-js/wasm/dist/graphviz.wasm and specify its directory with wasmFolder.

For development, I recommend using the one hosted by unpkg.

import React, { FC } from 'react';
import ReactDOM from 'react-dom';
import { Digraph, Node, Edge } from '@ts-graphviz/react';
import { Graphviz } from '@ts-graphviz/react/web';
import { wasmFolder } from '@hpcc-js/wasm';

wasmFolder('https://unpkg.com/@hpcc-js/wasm/dist/');

const App: FC = () => (
  <Graphviz>
    <Digraph>
      <Node id="n1" />
      <Node id="n2" />
      <Node id="n3" />
      <Edge targets={['n1', 'n2', 'n3']} />
      <Edge targets={['n1', 'n3']} />
    </Digraph>
  </Graphviz>
);

ReactDOM.render(<App />, document.getElementById('root'));