zcreativelabs / react-simple-maps

Beautiful React SVG maps with d3-geo and topojson using a declarative api.
https://www.react-simple-maps.io/
MIT License
3.04k stars 424 forks source link

ZoomableGroup with CSS transition transitions on initialization #228

Open raksooo opened 3 years ago

raksooo commented 3 years ago

I'm currently using a ZoomableGroup with a CSS transition on transform to animate zooming and panning. It works great except for the fact that the map transitions on initialization from the zoom value 1 to my zoom value. As far as I can tell from useZoomPan, position.k is 1 during the first render and is then set to the actual zoom value in a useEffect resulting in a second render with the correct value which then causes the map to transition between the two zoom levels.

Would it be possible to use the zoom argument the first render as well? Would it be enough to just modify it like this?

const [position, setPosition] = useState({ x: lon, y: lat, k: zoom })