useLayout

A React hook that provides a callback to invoke the configured layout algorithm on the given data.

const edgeTypes = {
  default: PolylineEdge
}

const nodeTypes = {
  default: MultiHandleNode
}

const LayoutFlow = () => {
  const [nodes] = useNodesState(initialNodes)
  const [edges] = useEdgesState(initialEdges)

  const { runLayout, running } = useLayout()

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      nodeTypes={nodeTypes}
      edgeTypes={edgeTypes}
    >
      <Panel position="top-right">
        <button onClick={() => runLayout('OrthogonalLayout')} disabled={running}>Orthogonal Layout</button>
      </Panel>
    </ReactFlow>
  )
}

export default function Flow() {
  return (
    <ReactFlowProvider>
      <LayoutFlow />
    </ReactFlowProvider>
  )
}

Parameters

LayoutContext

Returns

{
  runLayout: (
    configuration:
      | LayoutConfiguration
      | LayoutName
  ) => void
  running: boolean
}