Variable BasicNvlWrapper`Const`

BasicNvlWrapper: MemoExoticComponent<
    ForwardRefExoticComponent<
        Omit<BasicReactWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & RefAttributes<
            Partial<
                Pick<
                    NVL,
                    | "restart"
                    | "addAndUpdateElementsInGraph"
                    | "getSelectedNodes"
                    | "getSelectedRelationships"
                    | "removeNodesWithIds"
                    | "removeRelationshipsWithIds"
                    | "getNodes"
                    | "getRelationships"
                    | "getNodeById"
                    | "getRelationshipById"
                    | "getPositionById"
                    | "getCurrentOptions"
                    | "destroy"
                    | "deselectAll"
                    | "fit"
                    | "resetZoom"
                    | "setRenderer"
                    | "setDisableWebGL"
                    | "pinNode"
                    | "unPinNode"
                    | "setLayout"
                    | "setLayoutOptions"
                    | "getNodesOnScreen"
                    | "getNodePositions"
                    | "setNodePositions"
                    | "isLayoutMoving"
                    | "saveToFile"
                    | "saveToSvg"
                    | "getImageDataUrl"
                    | "getSvgDataUrl"
                    | "saveFullGraphToLargeFile"
                    | "getZoomLimits"
                    | "setZoom"
                    | "getScale"
                    | "getPan"
                    | "getHits"
                    | "getContainer",
                >,
            >,
        >,
    >,
> = ...

A basic React wrapper that wraps the NVL base library within a React component. It takes the class' arguments as properties, which are passed to the NVL constructor.

The ref exposes every NVL method. Calls made before the instance exists return null.

For examples, head to the Basic React wrapper documentation page.

Example

const Graph = () => {
  const nvlRef = useRef<NVL>(null)
  return (
    <>
      <BasicNvlWrapper ref={nvlRef} nodes={nodes} rels={relationships} />
      <button onClick={() => nvlRef.current?.fit(nodes.map((node) => node.id))}>Fit</button>
    </>
  )
}