diff --git a/README.md b/README.md index 3e39618e..5d0815a0 100644 --- a/README.md +++ b/README.md @@ -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 = () => ( + + + +); +``` + ## Examples You can find all examples in the [example](example) folder or check out the live versions: diff --git a/src/index.ts b/src/index.ts index 6c2f0444..e53cfcbd 100644 --- a/src/index.ts +++ b/src/index.ts @@ -9,3 +9,4 @@ export { isNode, isEdge, removeElements, addEdge, getOutgoers } from './utils/gr export * from './additional-components'; export * from './types'; +export * from './store/hooks';