# reaflow-exposed-methods

> Node-based Visualizations for React

Latest version **1.0.2** (published 2022-09-17) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install reaflow-exposed-methods
pnpm add reaflow-exposed-methods
yarn add reaflow-exposed-methods
bun add reaflow-exposed-methods
```

## Health

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

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-09-17 |
| First published | 2022-09-17 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 15 |
| Unpacked size | 344.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | amir107 |
| Keywords | react, reactjs, workflow, node-editor, diagrams, elkjs |

## Links

- npm: https://www.npmjs.com/package/reaflow-exposed-methods
- Homepage: https://github.com/reaviz/reaflow#readme
- Issues: https://github.com/reaviz/reaflow/issues
- npm.io page: https://npm.io/package/reaflow-exposed-methods

## Dependencies (15)

- [rdk](https://npm.io/package/rdk.md) ^6.0.2
- [elkjs](https://npm.io/package/elkjs.md) ^0.7.1
- [undoo](https://npm.io/package/undoo.md) ^0.5.0
- [reakeys](https://npm.io/package/reakeys.md) ^1.2.6
- [d3-shape](https://npm.io/package/d3-shape.md) ^3.0.1
- [ellipsize](https://npm.io/package/ellipsize.md) ^0.2.0
- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [kld-affine](https://npm.io/package/kld-affine.md) ^2.1.1
- [p-cancelable](https://npm.io/package/p-cancelable.md) ^3.0.0
- [framer-motion](https://npm.io/package/framer-motion.md) ^6.2.8
- [calculate-size](https://npm.io/package/calculate-size.md) ^1.1.1
- [kld-intersections](https://npm.io/package/kld-intersections.md) ^0.7.0
- [react-use-gesture](https://npm.io/package/react-use-gesture.md) ^8.0.1
- [react-fast-compare](https://npm.io/package/react-fast-compare.md) ^3.2.0
- [react-cool-dimensions](https://npm.io/package/react-cool-dimensions.md) ^2.0.7

## 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

- 1.0.2 (latest) — 2022-09-17
- 1.0.1 — 2022-09-17
- 1.0.0 — 2022-09-17
- 5.0.6 — 2022-09-17

## README

<div align="center">
  <h1>🕸 reaflow</h1>
  <br />
  Node-based Visualizations for React
  <br /><br />
  <a href="https://github.com/reaviz/reaflow/workflows/build/">
    <img src="https://github.com/reaviz/reaflow/workflows/build/badge.svg?branch=master" />
  </a>
  <a href="https://npm.im/reaflow">
    <img src="https://img.shields.io/npm/v/reaflow.svg" />
  </a>
  <a href="https://npm.im/reaflow">
    <img src="https://badgen.net/npm/dw/reaflow" />
  </a>
  <a href="https://github.com/reaviz/reaflow/blob/master/LICENSE">
    <img src="https://badgen.now.sh/badge/license/apache2" />
  </a>
  <a href="https://bundlephobia.com/result?p=reaflow">
    <img src="https://badgen.net/bundlephobia/minzip/reaflow">
  </a>
  <a href="https://discord.gg/tt8wGExq35">
    <img src="https://img.shields.io/discord/773948315037073409?label=discord">
  </a>
  <a href="https://opencollective.com/reaviz">
    <img alt="Open Collective backers and sponsors" src="https://img.shields.io/opencollective/all/reaviz?label=backers">
  </a>
</div>

---

REAFLOW is a modular diagram engine for building static or interactive editors. The library is feature-rich and modular allowing for displaying complex
visualizations with total customizability.

If you are looking for network graphs, checkout [reagraph](https://reagraph.dev).

## 🚀 Quick Links

- Checkout the [**docs and demos**](https://reaflow.dev)
- Explore the library on [Chroma](https://www.chromatic.com/library?appId=5f99ba42fe88ac0022fd1147)
- Learn about updates from the [Changelog](CHANGELOG.md)

## ✨ Features

- Complex automatic layout leveraging ELKJS
- Easy Node/Edge/Port customizations
- Zooming / Panning / Centering controls
- Drag and drop Node/Port connecting and rearranging
- Nesting of Nodes/Edges
- Proximity based Node linking helper
- Node/Edge selection helper
- Undo/Redo helper

## 📦 Usage

Install the package via **NPM**:

```
npm i reaflow --save
```

Install the package via **Yarn**:

```
yarn add reaflow
```

Import the component into your app and add some nodes and edges:

```jsx
import React from 'react';
import { Canvas } from 'reaflow';

export default () => (
  <Canvas
    maxWidth={800}
    maxHeight={600}
    nodes={[
      {
        id: '1',
        text: '1'
      },
      {
        id: '2',
        text: '2'
      }
    ]}
    edges={[
      {
        id: '1-2',
        from: '1',
        to: '2'
      }
    ]}
  />
);
```

## 🔭 Development

If you want to run reaflow locally, its super easy!

- Clone the repo
- `yarn install`
- `yarn start`
- Browser opens to Storybook page

## ❤️ Contributors

Thanks to all our contributors!

<a href="https://github.com/reaviz/reaviz/graphs/contributors"><img src="https://opencollective.com/reaviz/contributors.svg?width=890" /></a>

---
_Source: https://npm.io/package/reaflow-exposed-methods · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._