Merge pull request #258 from wbkd/develop

feat(internals): export easy peasy hooks closes #257
This commit is contained in:
Moritz
2020-05-29 14:37:30 +02:00
committed by GitHub
2 changed files with 25 additions and 0 deletions

View File

@@ -21,6 +21,7 @@ React Flow is a library for building node-based graphs. You can easily implement
- [Minimap](#minimap)
- [Controls](#controls)
- [Helper Functions](#helper-functions)
- [Access Internal State](#access-state)
- [Examples](#examples)
- [Development](#development)
- [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.
## 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
You can find all examples in the [example](example) folder or check out the live versions:

View File

@@ -9,3 +9,4 @@ export { isNode, isEdge, removeElements, addEdge, getOutgoers } from './utils/gr
export * from './additional-components';
export * from './types';
export * from './store/hooks';