Nincompoops Producing Methane

    react-flow-renderer
    TypeScript icon, indicating that this package has built-in type declarations

    9.7.3 • Public • Published

    react-flow

    React Flow is a library for building node based graphs. You can easily implement custom node types and it comes with components like a mini map and graph controls. Feel free to check out the examples or read the blog post to get started.

    👉 Next Major Release 👈

    We are currently working on the next version. You can find the installation instructions and breaking changes in this PR. Your feedback is highly appreciated :)

    React Flow was initially created for datablocks. A node-based editor for transforming, analyzing and visualizing data.

    Installation

    npm install react-flow-renderer
    

    Quick Start

    This is a very basic example of how to use React Flow. You can find more advanced examples on the website.

    import React from 'react';
    import ReactFlow from 'react-flow-renderer';
    
    const elements = [
      { id: '1', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
      // you can also pass a React component as a label
      { id: '2', data: { label: <div>Node 2</div> }, position: { x: 100, y: 100 } },
      { id: 'e1-2', source: '1', target: '2', animated: true },
    ];
    
    const BasicFlow = () => <ReactFlow elements={elements} />;

    Community Packages

    Development

    Before you start you need to install the React Flow dependencies via npm install and the ones of the examples cd example && npm install.

    If you want to contribute or develop custom features the easiest way is to start the dev server:

    npm start

    and the example app via:

    cd example && npm start 

    The example app serves the content of the example folder and watches changes inside the src folder. The examples are using the source of the src folder.

    Testing

    Testing is done with cypress. You can find the tests in the integration/flow folder. In order to run the tests do:

    npm run test

    Maintainer

    Moritz Klack • TwitterGithub

    Support

    If you need custom support or features for your application we are happy to hear from you.

    Thanks!

    Special thanks to Andy Lindemann for a lot of helpful contributions!


    React Flow is maintained by webkid, a data visualization agency from Berlin. If you need help or want to develop react-based tools or data visualizations, get in touch!

    Keywords

    none

    Install

    npm i react-flow-renderer

    DownloadsWeekly Downloads

    92,592

    Version

    9.7.3

    License

    MIT

    Unpacked Size

    4.21 MB

    Total Files

    180

    Last publish

    Collaborators

    • webk1d