React Flow

Installation

npm install --save @space-kit/react-flow

Documentation

APIs

• <FlowProvider /> - Provider to handle all blocks drag and drop
• <Canvas /> - Canvas where the blocks are drawn
• <DraggableBlock /> - Make your blocks draggable
• useFlow - Hook to get data about the blocks, removeBlock etc.

FlowProvider

Example

import { FlowProvider } from '@space-kit/react-flow';

<FlowProvider
  blocks={blocks}
  padding={{ x: 20, y: 80 }}
  arrowColor="#ffffff"
  onBlockSelected={(blockId: string) => {
    console.log('Block selected', blockId);
  }}
  onBlockChange={(blocks: BlockItem[]) => {
    console.log(blocks);
  }}
>

Props Table

| Prop | Type | Description | | ----------------- | -------------------------------------------- | ------------------------------ | | children | React.ReactElement OR React.ReactElement[] | Any react children | | blocks | BlockItem[] | Initial blocks | | padding | FlowPosition | Gap between each blocks | | arrowColor | string | Color of the arrows | | onBlockSelected | (blockId: string) => void | Calls when a block is selected | | onBlockChange | (blocks: BlockItem[]) => void | Calls when blocks are changed |

Canvas

Example

import { Canvas } from '@space-kit/react-flow';

<Canvas
  style={{
    width: '100%',
    border: '1px solid #000',
    background: '#2f2b2b',
    height: 700,
    overflow: 'scroll',
  }}
/>;

Props Table

| Prop | Type | Description | | ------- | --------------------- | --------------------------------------- | | style | React.CSSProperties | Styles that should be applied to canvas |

DraggableBlock

Example

import { DraggableBlock } from '@space-kit/react-flow';

<DraggableBlock
  id="block1"
  draggable
  blockTemplate={({ isActive }) => (
    <DragTemplate data="Block 1" isActive={isActive} />
  )}
  width={100}
  height={60}
>
  Blocks
</DraggableBlock>;

Props Table

| Prop | Type | Description | | --------------- | ------------------------------------------------- | -------------------------------------------------------------------------------------- | | id | string | Unique id for each draggable block. This will be used for rendering template and width | | children | React.ReactChild | The block that needs to be dragged | | draggable | boolean | Is the block draggable | | clone | boolean | Does the drag clone the component | | onClick | () => void | Calls when a draggable is clicked | | blockTemplate | (component: ComponentProps) => React.ReactChild | React component that needs to be rendered in the canvas | | width | number | Width of the block | | height | number | Height of the block |

useFlow

Example

import { useFlow } from '@space-kit/react-flow';

const { blocks, removeBlock } = useFlow();

| Parameters | Description | | ------------- | -------------------------------- | | blocks | Get the blocks that are rendered | | removeBlock | Can be used to remove a block |