Beautiful React Diagram Components | React Diagram Components

A collection of lightweight React components that make it easier to generate beautiful diagrams in React apps.

How to use it:

1. Install & import the component.

# Yarn
$ yarn add beautiful-react-diagrams

# NPM
$ npm i beautiful-react-diagrams --save// stylesheet
import 'beautiful-react-diagrams/styles.css';
// Diagram
import Diagram from 'beautiful-react-diagrams';

2. Create a basic diagram.

import Diagram, { createSchema, useSchema } from 'beautiful-react-diagrams';
// the diagram model
const initialSchema = createSchema({
  nodes: [
    { id: 'node-1', content: 'Node 1', coordinates: [250, 60], },
    { id: 'node-2', content: 'Node 2', coordinates: [100, 200], },
    { id: 'node-3', content: 'Node 3', coordinates: [250, 220], },
    { id: 'node-4', content: 'Node 4', coordinates: [400, 200], },
  ],
  links: [
    { input: 'node-1',  output: 'node-2' },
    { input: 'node-1',  output: 'node-3' },
    { input: 'node-1',  output: 'node-4' },
  ]
});
const UncontrolledDiagram = () => {
  // create diagrams schema
  const [schema, { onChange }] = useSchema(initialSchema);
  return (
    <div style={{ height: '22.5rem' }}>
      <Diagram schema={schema} onChange={onChange} />
    </div>
  );
};
<UncontrolledDiagram />

Preview:

Download Details:

Author: antonioru

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/antonioru/beautiful-react-diagrams

License: MIT

#react #reactjs