useNodesMeasuredEffect

A React hook that executes the given callback when all nodes are measured by React Flow and have a size.

const edgeTypes = {
  default: PolylineEdge
}

const nodeTypes = {
  default: MultiHandleNode
}

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

  const { runLayout, running } = useLayout()

  // run initial layout after the nodes have been measured
  useNodesMeasuredEffect(() => {
    runLayout('OrthogonalLayout')
  })

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      nodeTypes={nodeTypes}
      edgeTypes={edgeTypes}
    ></ReactFlow>
  )
}

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

Parameters

() => void