Merge pull request #258 from wbkd/develop
feat(internals): export easy peasy hooks closes #257
This commit is contained in:
@@ -21,6 +21,7 @@ React Flow is a library for building node-based graphs. You can easily implement
|
|||||||
- [Minimap](#minimap)
|
- [Minimap](#minimap)
|
||||||
- [Controls](#controls)
|
- [Controls](#controls)
|
||||||
- [Helper Functions](#helper-functions)
|
- [Helper Functions](#helper-functions)
|
||||||
|
- [Access Internal State](#access-state)
|
||||||
- [Examples](#examples)
|
- [Examples](#examples)
|
||||||
- [Development](#development)
|
- [Development](#development)
|
||||||
- [Testing](#testing)
|
- [Testing](#testing)
|
||||||
@@ -363,6 +364,29 @@ Transforms pixel coordinates to the internal React Flow coordinate system
|
|||||||
|
|
||||||
You can use these function as seen in [this example](/example/src/Overview/index.js#L40-L41) or use your own ones.
|
You can use these function as seen in [this example](/example/src/Overview/index.js#L40-L41) or use your own ones.
|
||||||
|
|
||||||
|
## Access Internal State
|
||||||
|
|
||||||
|
We are using [Easy Peasy](https://easy-peasy.now.sh/) for state handling.
|
||||||
|
If you need to access the internal state you can use the `useStoreState` hook inside a child component of the React Flow component:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import ReactFlow, { useStoreState } from 'react-flow-renderer';
|
||||||
|
|
||||||
|
const NodesDebugger = () => {
|
||||||
|
const nodes = useStoreState(state => state.nodes);
|
||||||
|
|
||||||
|
console.log(nodes);
|
||||||
|
|
||||||
|
return null:
|
||||||
|
}
|
||||||
|
|
||||||
|
const Flow = () => (
|
||||||
|
<ReactFlow elements={elements}>
|
||||||
|
<NodesDebugger />
|
||||||
|
</ReactFlow>
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
## Examples
|
## Examples
|
||||||
|
|
||||||
You can find all examples in the [example](example) folder or check out the live versions:
|
You can find all examples in the [example](example) folder or check out the live versions:
|
||||||
|
|||||||
@@ -9,3 +9,4 @@ export { isNode, isEdge, removeElements, addEdge, getOutgoers } from './utils/gr
|
|||||||
|
|
||||||
export * from './additional-components';
|
export * from './additional-components';
|
||||||
export * from './types';
|
export * from './types';
|
||||||
|
export * from './store/hooks';
|
||||||
|
|||||||
Reference in New Issue
Block a user