# @space-kit/react-flow

> Create flow charts in react

Latest version **0.0.7** (published 2020-11-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install @space-kit/react-flow
pnpm add @space-kit/react-flow
yarn add @space-kit/react-flow
bun add @space-kit/react-flow
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2020-11-23 |
| First published | 2020-11-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 179.1 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Shamin |
| Maintainers | shamin.meerankutty |
| Keywords | flow chart, flow, react |

## Links

- npm: https://www.npmjs.com/package/@space-kit/react-flow
- Repository: https://github.com/shamin/react-flow
- Homepage: https://github.com/shamin/react-flow#readme
- Issues: https://github.com/shamin/react-flow/issues
- npm.io page: https://npm.io/package/@space-kit/react-flow

## Dependencies (2)

- [immer](https://npm.io/package/immer.md) ^8.0.0
- [@space-kit/portal](https://npm.io/package/@space-kit/portal.md) 0.1.0-alpha.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.7 (latest) — 2020-11-23
- 0.0.6 — 2020-11-23
- 0.0.5 — 2020-11-23
- 0.0.4 — 2020-11-23
- 0.0.3 — 2020-11-23
- 0.0.2 — 2020-11-23
- 0.0.1 — 2020-11-23

## README

# 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

```jsx
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

```jsx
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

```jsx
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

```jsx
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    |

---
_Source: https://npm.io/package/@space-kit/react-flow · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._