treeviz-react v0.4.0

Treeviz-react

Treeviz implementation for React

Usage

npm install treeviz-react

// or

yarn add treeviz-react

import React from 'react';
import { TreevizReact } from 'treeviz-react';

const data = [
  { id: 1, text_1: 'Chaos', text_2: 'Void', father: null, color: '#FF5722' },
  { id: 2, text_1: 'Tartarus', text_2: 'Abyss', father: 1, color: '#FFC107' },
  { id: 3, text_1: 'Gaia', text_2: 'Earth', father: 1, color: '#8BC34A' },
  { id: 4, text_1: 'Eros', text_2: 'Desire', father: 1, color: '#00BCD4' },
];

const Foo = () => {
  return (
    <TreevizReact
      data={data}
      idKey={'id'}
      relationnalField={'father'}
      nodeWidth={200}
      nodeHeight={100}
      mainAxisNodeSpacing={2}
      secondaryAxisNodeSpacing={1.3}
      renderNode={(node) =>
        `<div style="height:${node.settings.nodeHeight}px;display:flex;align-items:center;margin-left:12px">Node name: ${node.data.text_1}</div>`
      }
      onNodeClick={(node) => console.log('you clicked on node ' + node.id)}
      duration={500}
      linkWidth={(node) => 3}
    />
  );
};

The tree will automatically update whenever one of those props change. Note that is not recommended to update the relationnalField and the idKey prop once the component has been mounted.

API