Narcoleptic Pony Machine

    reaflow
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.6 • Public • Published

    🕸 reaflow


    Node-based Visualizations for React

    Open Collective backers and sponsors

    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

    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!

    Install

    npm i reaflow

    DownloadsWeekly Downloads

    2,776

    Version

    5.0.6

    License

    Apache-2.0

    Unpacked Size

    366 kB

    Total Files

    63

    Last publish

    Collaborators

    • amcdnl