diff --git a/README.md b/README.md index 9fee03ef..ed6f8d43 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ React Flow is a library for building node-based graphs. You can easily implement - [ReactFlowProvider](#reactflowprovider) - [Styling](#styling) - [Helper Functions](#helper-functions) -- [Access Internal State](#access-internal-state) +- [Access Internal State and Actions](#access-internal-state-and-actions) - [Examples](#examples) - [Development](#development) - [Testing](#testing) @@ -156,6 +156,12 @@ Fits view port so that all nodes are visible `getElements = (): Elements` +### setTransform + +Sets position and zoom of the pane + +`setTransform = (transform: FlowTransform): void` + # Nodes There are three different [node types](#node-types--custom-nodes) (`default`, `input`, `output`) you can use. The node types differ in the number and types of handles. An input node has only a source handle, a default node has a source and a target and an output node has only a target handle. You create nodes by adding them to the `elements` array of the `ReactFlow` component. @@ -507,7 +513,7 @@ Returns all direct child nodes of the passed node 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 +# Access Internal State and Actions Under the hood React Flow uses [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 `ReactFlow` component: @@ -530,6 +536,21 @@ const Flow = () => ( ); ``` +You will not need this in most cases but you can also use the internal actions that are defined in the [store](/src/store/index.ts): + +```javascript +import React, { useEffect } from 'react'; +import { useStoreActions } from 'react-flow-renderer' + +const TransformUpdater = ({ x, y, zoom }) => { + const setTransform = useStoreActions(a => a.setInitTransform); + + useEffect(() => { + setTransform({ x, y, k: zoom }) + }, [x, y, zoom]) +}); +``` + If you need more control you can wrap the `ReactFlow` component with the `ReactFlowProvider` component in order to be able to call `useStoreState` outside of the `ReactFlow` component. # Examples