![npm version](https://camo.githubusercontent.com/12916a602b0db130b0713d00162a84b91e5b5eaabbbfba272906108be36c2d73/68747470733a2f2f62616467652e667572792e696f2f6a732f25343073706163652d6b697425324672656163742d666c6f772e737667)
npm install --save @space-kit/react-flow
You can test react flowy in this codesandbox.
<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.
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);
}}
>
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 |
import { Canvas } from '@space-kit/react-flow';
<Canvas
style={{
width: '100%',
border: '1px solid #000',
background: '#2f2b2b',
height: 700,
overflow: 'scroll',
}}
/>;
Prop |
Type |
Description |
style |
React.CSSProperties |
Styles that should be applied to canvas |
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>;
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 |
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 |