Ogma React wrapper

We have developed a thin wrapper library for integration with React. It includes the essential components to build an application with React and Ogma: a context provider, adapters for styles, transformations and additional layers and UI components.

You can find the full documentation and examples in the @linkurious/ogma-react repository.

Using it with create-react-app

$ npm install -S <YOUR_NPM_LINK_FROM_GET.LINKURIO.US>
$ npm install -S @linkurious/ogma-wrapper
$ npx create-react-app my-app

After, in your src/App.tsx you can start using @linkurious/ogma-react directly like that:

import React from 'react';
import { RawGraph } from '@linkurious/ogma';
import { NodeStyleRule, Ogma } from '@linkurious/ogma-react';

export default function App() {
  const graph: RawGraph = {
    nodes: [{ id: 0, attributes: { text: 'my node' } }],
    edges: []
  };
  const onReady = () => {
    console.log('my ogma visualisation is ready!');
  };
  return (
    <Ogma graph={graph} onReady={onReady}>
      <NodeStyleRule attributes={{ color: '#61dafb' }} />
    </Ogma>
  );
}

You can find the more examples and the full API reference in the @linkurious/ogma-react repository.