react-tree-svg

react-tree-svg

Introduction

This project allows to create a horizontal representation of a tree.

It uses React and can be included in other project as a React component but can also be used to generate a svg.

In order to be able to generate the SVG on the server and on the client we need that each element is rendered synchronously

Installation

$ npm i react-tree-svg

Usage

Taxonomy Tree

const {render} = require('react-tree-svg');

const data = [
  {
    name: 'string',
    rank: 'string',
    count: 3,
    children: [{...}],
    nbTaxonomies: 8,
   },
];


const svg = render(data, {
        nodeRenderer: 'taxonomy',
        rankDepthOptions: {
          maxRankDepth: 8,
        },
        positionOptions: {
          spacingHorizontal: 100,
        },
      });

Molecules Tree

const {render} = require('react-tree-svg');

const data = [
  {
    reaction: {
      Label: 'string',
      rxnCode: 'string',
    },
    reactant: {
      molfile: 'string',
      idCode: 'string',
      mf: 'string',
      monoisotopicMass: 121.0697,
    },
    products: {
      molfile: 'string',
      idCode: 'string',
      mf: 'string',
      children: [{...}],
      monoisotopicMass: 105.065,
    },
  },
];

const svg = render(data, {
  nodeRenderer: 'molecule',
  nodeRendererOptions: {
    masses: [105.0697, 58.065, 194.1173, 163.0752, 133.0647, 135.0439],
    precision: 50,
  },
  positionOptions: {
    spacingHorizontal: 150,
  },
});

License

MIT