0.0.7 • Published 3 years ago
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 draggableuseFlow - 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 |