chore(readme): add section
This commit is contained in:
@@ -2,8 +2,9 @@
|
|||||||
|
|
||||||
# :ocean: React Flow
|
# :ocean: React Flow
|
||||||
|
|
||||||
React Flow is a library for building node-based graphs. You can easily implement custom node types and it comes with plugins like a MiniMap and a Controls Panel. Check out the [demo](https://react-flow.netlify.com/) graph.
|
React Flow is a library for building node-based graphs. You can easily implement custom node types and it comes with plugins like a mini-map and graph controls. You can check out the [examples](https://react-flow.netlify.com/) or read the [blog post](https://webkid.io/blog/react-flow-node-based-graph-library/) to get started.
|
||||||
|
|
||||||
|
- [Key Features](#key-features)
|
||||||
- [Installation](#installation)
|
- [Installation](#installation)
|
||||||
- [Usage](#usage)
|
- [Usage](#usage)
|
||||||
- [Props](#props)
|
- [Props](#props)
|
||||||
@@ -19,6 +20,15 @@ React Flow is a library for building node-based graphs. You can easily implement
|
|||||||
- [Controls](#controls)
|
- [Controls](#controls)
|
||||||
- [Examples](#examples)
|
- [Examples](#examples)
|
||||||
|
|
||||||
|
# Key Features
|
||||||
|
|
||||||
|
* **Easy to use:** Seamless zooming & panning behaviour and single and multi-selections of elements
|
||||||
|
* **Customizable:** Different [node](#node-types--custom-nodes) and [edge types](#edge-types--custom-edges) and support for custom nodes and edges
|
||||||
|
* **Fast rendering:** only elements that are in the view port are displayed
|
||||||
|
* **Utils:** Snap-to-grid behaviour, background styles and graph [helper functions](#helper-functions)
|
||||||
|
* **Plugin system:** [Mini map and graph controls](#plugins)
|
||||||
|
* **Reliable**: Written in [Typescript](https://www.typescriptlang.org/) and tested with [cypress](https://www.cypress.io/)
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
```
|
```
|
||||||
@@ -233,3 +243,8 @@ You can find all examples in the [example](example) folder or check out the live
|
|||||||
- [empty](https://react-flow.netlify.app/empty)
|
- [empty](https://react-flow.netlify.app/empty)
|
||||||
- [inactive](https://react-flow.netlify.app/inactive)
|
- [inactive](https://react-flow.netlify.app/inactive)
|
||||||
- [custom node](https://react-flow.netlify.app/custom-node)
|
- [custom node](https://react-flow.netlify.app/custom-node)
|
||||||
|
|
||||||
|
|
||||||
|
## Thanks!
|
||||||
|
|
||||||
|
Special thanks to [Andy Lindemann](https://github.com/AndyLnd) for a lot of helpful contributions!
|
||||||
@@ -69,7 +69,7 @@ const RichGraph = () => {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={addRandomNode}
|
onClick={addRandomNode}
|
||||||
style={{ position: 'absolute', left: 15, top: 10, zIndex: 4 }}
|
style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}
|
||||||
>
|
>
|
||||||
add node
|
add node
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user