[reactjs] zoom level state issue
See original GitHub issueI want to programatically close zoom ability
I have a variable
const [zoomLevel, setZoomLevel] = useState(0);
Use it like this
const zoomOptions = useMemo(() => ({
pan: {
enabled: true,
mode: 'xy',
modifierKey: 'alt'
},
zoom: {
mode: 'xy',
drag: {
enabled: true,
borderColor: 'rgb(54, 162, 235)',
borderWidth: 1,
backgroundColor: 'rgba(54, 162, 235, 0.3)'
},
onZoom: ({}) => {
console.log("ZOOM LEVEL", zoomLevel)
setZoomLevel(prevState => prevState + 1);
},
onZoomStart: ({}) => {
console.log("ZOOM START", zoomLevel)
if (zoomLevel >= 8) {
console.log("FORBID!")
return false;
}
}
}
}), [zoomLevel]);
And zoom stops working almost immediately. What am I doing wrong?
Issue Analytics
- State:
- Created a year ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
How to set and unset a body zoom level in React
The problem is document.body.style.zoom can be used to set the values, but the current values cannot be taken from them. Have you seen...
Read more >Reactjs – React-google-maps zoom issue - iTecNote
The problem I have is that sometimes when I zoom, the map is not updated (the map tiles are not re-rendered based on...
Read more >Contextual Zoom Example - React Flow
This example shows how the current zoom level can be used by a node to decide which content to show. We are using...
Read more >zoom - CSS: Cascading Style Sheets - MDN Web Docs
The non-standard zoom CSS property can be used to control the magnification level of an element. transform: scale() should be used instead ...
Read more >Analog of zoom level in react-native-maps?
I am toying with migrating a web-based application to react-native. The web based application is well developed using leaflet (and ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
If im correct you get the chart object in your onZoom callback, here you can call
chart.scales[scaleId].min
andchart.scales[scaleId].max
if im correct (cant test atm but verry sure this should work)It worked thank you : )