Skip to content
/ rflowz Public

React library for building flowcharts and diagrams

Notifications You must be signed in to change notification settings

Briuor/rflowz

Repository files navigation

rflowz

React library for building flowcharts and diagrams

NPM JavaScript Style Guide

Install

npm install rflowz

Usage

Basic Usage

import React from 'react';
import RFlowz, { useNodeState } from 'rflowz';
import 'rflowz/dist/index.css';

const DefaultNode = ({ data }) => <div className='node'>{data.labelPrefix} Node</div>;

export default function App() {
  const [nodes, setNodes] = useNodeState([
    {
      id: '1',
      x: 100,
      y: 200,
      component: DefaultNode,
      data: { labelPrefix: 'First' },
      nextNodeIds: ['2']
    },
    {
      id: '2',
      x: 425,
      y: 224,
      component: DefaultNode,
      data: { labelPrefix: 'Second' },
      nextNodeIds: []
    }
  ]);

  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <RFlowz nodes={nodes} />
    </div>
  );
}

Passing Events to Node Component

import React, { useEffect } from 'react';
import RFlowz, { useNodeState } from 'rflowz';
import 'rflowz/dist/index.css';

const StartNode = ({ data }) => (
  <div className='node'>
    Generate a random value
    <div
      onClick={data.generateRandomValue}
      className='random-btn'
      role='button'
    >
      Click Me
    </div>
  </div>
);

const ResultNode = ({ data }) => (
  <div className='node'>Result: {data.randomValue}</div>
);

export default function EventExample() {
  const [nodes, setNodes] = useNodeState([]);

  useEffect(() => {
    const generateRandomValue = (e) => {
      setNodes((nds) =>
        nds.map((node) => {
          if (node.id === 'result') {
            const newNode = {
              ...node,
              data: {
                ...node.data,
                randomValue: Math.round(Math.random() * 999) + 1
              }
            };
            return newNode;
          }

          return node;
        })
      );
    };

    setNodes([
      {
        id: 'start',
        x: 100,
        y: 200,
        component: StartNode,
        data: {
          generateRandomValue: generateRandomValue
        },
        nextNodeIds: ['result']
      },
      {
        id: 'result',
        x: 425,
        y: 224,
        component: ResultNode,
        data: {
          randomValue: 1
        },
        nextNodeIds: []
      }
    ]);
  }, [setNodes]);

  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <RFlowz nodes={nodes} />
    </div>
  );
}

API

RFlowz

Important: The RFlowz height is controlled by it's parent element.

<div style={{ width: '100%', height: '100vh' }}>
  <RFlowz nodes={nodes} />
</div>

props

  • nodes Type: Node[]

Nodes

const nodes = [{
  id: '1',
  x: 100,
  y: 200,
  component: CustomNode,
  data: { title: 'Node Title' },
  nextNodeIds: ['2']
}];
  • id (required) Description: Unique identifier Type: string
  • x (required) Type: number
  • y (required) Type: number
  • component (required) Type: React.Component
  • data Type: Object
  • nextNodeIds Type: string[]
  • arrowColor Type: string

Hooks

  • useNodeState

    Usage
    import RFlowz, { useNodeState } from 'rflowz';
    
    function Component() {
      const [nodes, setNodes] = useNodeState([]);
      ...
    }
    Typescript
    import RFlowz, { useNodeState, Node } from 'rflowz';
    
    function Component() {
      const [nodes, setNodes] = useNodeState<Node[]>([]);
      ...
    }

License

MIT © Briuor