How to Render?

[CuriousMark]

Hi there!

Firstly thanks for the awesome looking library.

I'm not quite sure how to actually render these graphs.

E.g. my component looks something like this:

import * as React from 'react';

import { Digraph, render, useGraphvizContext } from '@ts-graphviz/react';


const myComponent: React.FC = () => {

  return (
    <div id='my-graph-component''>
      {render((
        <Digraph
          rankdir='LR'
          edge={{ color: 'black', fontcolor: 'blue' }}
          node={{ shape: 'circle' }}
        >
        </Digraph>)
      ), useGraphvizContext()}
    </div>
  );
};

export const MyComponent = React.memo(myComponent);

But I keep getting the "Must use library's render function" error.

Basically, looking at the example from ReadeMe, how would I go about actually rendering that graph as a functional component?

[kamiazya]

@CuriousMark
Thank you for the question.

The error occurs because the useGraphvizContext function in @ts-graphviz/react is executed before the render function is executed.

You can also use this renderToDot function to output the dot language.

import React from 'react';
import { Digraph, renderToDot } from '@ts-graphviz/react';


const myComponent: React.FC = () => {
  return (
    <div id='my-graph-component'>
      {renderToDot(
        <Digraph
          rankdir='LR'
          edge={{ color: 'black', fontcolor: 'blue' }}
          node={{ shape: 'circle' }}
        >
        </Digraph>)}
    </div>
  );
};

export default React.memo(myComponent);

The result is a DOM like this image.

However, I suspect that this answer may not meet your needs.

You're looking for an image output from Graphviz in your browser, right?

In that case, you can display the image by the following method using the dot language output from the renderToDot function of @ts-graphviz/react.

• Send the dot language to the server via HTTP and receive the image.
• Generate an image on your browser using the npm package that allows Graphviz to run on your browser.

The following are packages that generate images with Graphviz on the browser.

• https://www.npmjs.com/package/@hpcc-js/wasm

[kamiazya]

@CuriousMark

An example of running Graphviz on a browser has been implemented in the following repository.

It may be helpful for you.

https://github.com/kamiazya/react-dom-graphviz-integration

[CuriousMark]

Thanks so much for the response!

Ideally I'd like to avoid any @hpcc-js/wasm, since including the package will be difficult due to my usage of Webpack.

I'd also like graph to be more interactive.

So basically I'm trying to see if graph can just use d3 like this library:
https://github.com/DomParfitt/graphviz-react

And then eventually render nodes more nicely with d3-force:
https://github.com/vasturiano/react-force-graph

I'd love to hear any further suggestions you have. But thanks again for making this awesome library ❤️