reaflow-extended
v1.0.6
Published
Node-based Visualizations for React
Downloads
31
Maintainers
Readme
REAFLOW is a modular diagram engine for building static or interactive editors. The library is feature-rich and modular allowing for displaying complex visualizations with total customizability.
If you are looking for network graphs, checkout reagraph.
🚀 Quick Links
- Checkout the docs and demos
- Explore the library on Chroma
- Learn about updates from the Changelog
✨ Features
- Complex automatic layout leveraging ELKJS
- Easy Node/Edge/Port customizations
- Zooming / Panning / Centering controls
- Drag and drop Node/Port connecting and rearranging
- Nesting of Nodes/Edges
- Proximity based Node linking helper
- Node/Edge selection helper
- Undo/Redo helper
📦 Usage
Install the package via NPM:
npm i reaflow --save
Install the package via Yarn:
yarn add reaflow
Import the component into your app and add some nodes and edges:
import React from 'react';
import { Canvas } from 'reaflow';
export default () => (
<Canvas
maxWidth={800}
maxHeight={600}
nodes={[
{
id: '1',
text: '1'
},
{
id: '2',
text: '2'
}
]}
edges={[
{
id: '1-2',
from: '1',
to: '2'
}
]}
/>
);
🔭 Development
If you want to run reaflow locally, its super easy!
- Clone the repo
yarn install
yarn start
- Browser opens to Storybook page
❤️ Contributors
Thanks to all our contributors!