How do I move the view so that it centers on a node?

[popey456963]

For instance, when searching for a node I want to be able to center it when selected. I can't easily do this by taking replacing the current screen offset with the position of the node beacuse that doesn't seem accurate.

[g-wozniak]

I've tried using two functions setCenter nor setViewport on the instance I got from the hook:

const {setViewport} = useReactFlow()
...
const onBlockOpen = useCallback((posX: number, posY: number) => {
      setViewport({
         x:posX,
         y: posY,
         zoom: 0.6
      })
}, [setViewport])

as specified in the documentation but neither did anything (no matter of values). Try to check the examples as well, that example seems to work but I don't understand why mine does not work..

[janarvaezkng]

In my case, I had to fix the positions a little bit, but it was basically this:

setViewport(
  {
    x: -node.position.x - (node.width / 2) + (viewportWidth / 2),
    y:  -node.position.y - (node.height / 2) + (viewportHeight / 2),
    zoom: 1,
  }, 
  { duration: 800 }
);

[yaredtsy]

you can use setCenter

reactFlowInstance.setCenter(node.position.x, node.position.y )

[aziz-haddad]

you can use setCenter

reactFlowInstance.setCenter(node.position.x, node.position.y )

This worked perfectly for me.