Get the current ReactFlow map zoom level #2145

alessiopunturo · 2022-05-13T15:58:10Z

alessiopunturo
May 13, 2022

Hello everyone!
I am working on a project that's using react-flow library. We would like to make the zoomIn and zoomOut icons in the map disabled and gray when the maximum or the minimum zoom is respectively reached.
Unfortunately, I was not able to find anything on how to achieve this result. I explored also the internal state of the flow but it seems that no current zoom value variable is exposed.
Is there an alternative way I could achieve this?

Thank you a lot for the support and you did an amazing job with the library!

Answered by alessiopunturo

May 18, 2022

I managed to get the desired behavior accessing directly the DOM elements by the default reactflow classnames:

react-flow__controls-zoomin
react-flow__controls-zoomout

And setting the cursor and opacity style properties.
To understand when the maximum zoom or the minimum zoom was reached, I counted the number of clicks necessary to reach the max and minimum levels and used the onZoomIn and onZoomOut callbacks of the react-flow component to set an internal state variable currentZoomLevel and used that to set the style properties.

Hope this can be useful for anyone else!

View full answer

alessiopunturo · 2022-05-18T14:04:43Z

alessiopunturo
May 18, 2022
Author

I managed to get the desired behavior accessing directly the DOM elements by the default reactflow classnames:

react-flow__controls-zoomin
react-flow__controls-zoomout

And setting the cursor and opacity style properties.
To understand when the maximum zoom or the minimum zoom was reached, I counted the number of clicks necessary to reach the max and minimum levels and used the onZoomIn and onZoomOut callbacks of the react-flow component to set an internal state variable currentZoomLevel and used that to set the style properties.

Hope this can be useful for anyone else!

4 replies

vibhorSharma7 Jan 23, 2023

Hello @alessiopunturo , I'm also searching for the same problem. Can you share any example where you've done this. Thank you

bcakmakoglu Jan 23, 2023

Here's a sandbox example of how to do it (though I think it's more simple than what OP has done).

vibhorSharma7 Jan 23, 2023

Thanks a ton @bcakmakoglu . Do you also know that how we can show current zoom level between + and - buttons. Like 100% is default value and when user clicks on + button it changes it's vaue to some predefined percentage like 120% ? Thanks

bcakmakoglu Jan 23, 2023

You mean something like this?

zigavidmar · 2024-04-15T09:11:35Z

zigavidmar
Apr 15, 2024

You can get the current zoom level from the useReactFlow hook.

const reactFlowInstance = useReactFlow();
const zoom = reactFlowInstance.getZoom();

// In use
const x = 100;
const y = 200;
const duration = 1000;
const zoom = reactFlowInstance.getZoom();

reactFlowInstance.setCenter(x, y, { 
  duration,
  zoom
})

Here are some other stuff you can get from it: https://reactflow.dev/api-reference/types/react-flow-instance

1 reply

yairEO Dec 25, 2024

This doesn't "update" when zoom level changes, and only zoom changes (no panning event)

yairEO · 2024-12-25T12:23:37Z

yairEO
Dec 25, 2024

This is still a problem... there is no apparent way to listen to only the zoom event and no other viewport event which can spam the listener and create havoc with re-renders

5 replies

bcakmakoglu Dec 25, 2024

You can use useStore for that:

const selector = (state: ReactFlowState) => {
	return {
		zoom: state.transform[2]
	}
}

const { zoom } = useStore(selector)

yairEO Dec 26, 2024

@bcakmakoglu - I've tried this before posting and again after your comment but it's not good at all because the moment you incorporate useStore into your code, it will cause needless re-renders on viewport panning (holding and dragging with the mouse/touch).

react-flow-listen-to-zoom-only.mp4

The only hack is to use useOnViewportChange which will not cause a re-render, since it isn't a hook which mutates a state, and then manually update a local zoom state and somehow drill it down to the node's through their data property.. far from optimal.

bcakmakoglu Dec 30, 2024

I'm not quite following the logic here - if you were to change the a node based on the zoom level it's going to be a re-render anyway, so what's the difference here? Maybe I'm just misunderstanding but this isn't quite clicking for me logically 😄

yairEO Dec 30, 2024

I want to listen only to zoom but not panning events (which are very frequent).
My zoom event listener is calculating the font-size for the nodes and when this logic runs while panning, the whole panning experience is extremely lagging, and I would say, unworkable when many nodes are rendered (I've tried with about 80 nodes I'm guessing)

raywei2023 Jul 29, 2026

I’m also trying to find the zoomEnd event.

Get the current ReactFlow map zoom level #2145

Uh oh!

Replies: 3 comments · 10 replies

Uh oh!

alessiopunturo May 18, 2022 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 3 comments 10 replies

alessiopunturo
May 18, 2022
Author