diff --git a/README.md b/README.md index 7c82ae8f..a1d06b9c 100644 --- a/README.md +++ b/README.md @@ -78,7 +78,7 @@ const BasicFlow = () => ; - `onlyRenderVisibleNodes`: default: `true` #### Event Handlers -- `onElementClick(element: Node | Edge)`: called when user clicks node or edge +- `onElementClick(element: Node | Edge)`: called when user clicks node or edge click - `onElementsRemove(elements: Elements)`: called when user removes node or edge - `onNodeDragStart(node: Node)`: node drag start - `onNodeDragStop(node: Node)`: node drag stop @@ -87,9 +87,9 @@ const BasicFlow = () => ; - `onNodeMouseLeave(evt: MouseEvent, node: Node)`: node mouse leave - `onNodeContextMenu(evt: MouseEvent, node: Node)`: node context menu - `onConnect({ source, target })`: called when user connects two nodes -- `onLoad(reactFlowInstance)`: called when flow is initialized +- `onLoad(reactFlowInstance)`: called after flow is initialized - `onMove()`: called when user pans or zooms -- `onSelectionChange(elements: Elements)`: called user selects one or multiple elements +- `onSelectionChange(elements: Elements)`: called when user selects one or multiple elements #### Interaction - `nodesDraggable`: default: `true`. This applies to all nodes. You can also change the behavior of a specific node with the `draggable` node option. @@ -170,9 +170,9 @@ Node example: `{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { - `targetPosition`: 'left' | 'right' | 'top' | 'bottom' handle position - default: 'top' - `sourcePosition`: 'left' | 'right' | 'top' | 'bottom' handle position - default: 'bottom' - `isHidden`: if `true`, the node will not be rendered -- `draggable`: if option is not set, the node is draggable (overwrites generel `nodesDraggable` option) -- `connectable`: if option is not set, the node is connectable (overwrites generel `nodesConnectable` option) -- `selectable`: if option is not set, the node is selectable (overwrites generel `elementsSelectable` option) +- `draggable`: boolean - if option is not set, the node is draggable (overwrites generel `nodesDraggable` option) +- `connectable`: boolean - if option is not set, the node is connectable (overwrites generel `nodesConnectable` option) +- `selectable`: boolean - if option is not set, the node is selectable (overwrites generel `elementsSelectable` option) ## Node Types & Custom Nodes @@ -195,7 +195,7 @@ nodeTypes={{ }} ``` -You could now use the type `special` for a node. +You can now use the type `special` for a node. The `default`, `input` and `output` types would be still available except you overwrote one of them. There is an example of a custom node implementation in the [custom node example](/example/src/CustomNode). @@ -231,7 +231,7 @@ const targetHandleWithValidation = ( ### Prop Types - `type`: 'source' or 'target' -- `id`: string - you only need this when you have multiple source or target handles otherwise the node id is used +- `id`: string - you only need this when you have multiple source or target handles (otherwise the node id is used) - `position`: 'left', 'right', 'top' or 'bottom' handle position - default: 'top' for type target, 'bottom' for type source - `onConnect`: function that gets triggered on connect - `isValidConnection`: function receives a connection `{ target: 'some-id', source: 'another-id' }` as param, returns a boolean - default: `true` @@ -249,11 +249,11 @@ You can find an example of how to implement a custom node with multiple handles # Edges -React Flow comes with three [edge types](#edge-types--custom-edges) (`default`, `straight`, `step`, `smoothstep`). As the names indicate, the edges differ in the representation. The default type is a bezier edge. You create edges by adding them to your `elements` array of the `ReactFlow` component. +React Flow comes with four [edge types](#edge-types--custom-edges) (`default`, `straight`, `step`, `smoothstep`). As the names indicate, the edges differ in the representation. The default type is a bezier edge. You create edges by adding them to your `elements` array of the `ReactFlow` component. Edge example: `{ id: 'e1-2', type: 'straight', source: '1', target: '2', animated: true, label: 'edge label' }` -If you wanted to display this edge, you would need a node with id = 1 (source node) and one with id = 2 (target node). +If you wanted to display this edge, you would need a node with id = 1 (source node) and another one with id = 2 (target node). ## Options @@ -271,7 +271,7 @@ If you wanted to display this edge, you would need a node with id = 1 (source no - `markerEndId`: custom marker end url - if this is used `arrowHeadType` gets ignored - `isHidden`: if `true`, the edge will not be rendered -You can find an example with lots of different edges in the [edges example](https://reactflow.dev/edges). +You can find an example with different edges in the [edges example](https://reactflow.dev/edges). ### Edge Types & Custom Edges