No way to center on first render

[japgolly]

Hi! I'm trying to get ReactSvgPanZoom to center by default on the first render. I've tried:

• calling fitToViewer(INITIAL_VALUE, ALIGN_CENTER, ALIGN_CENTER) and passing the result as value in the ReactSvgPanZoom props
• calling fitToViewer(v, ALIGN_CENTER, ALIGN_CENTER) and passing the result as value in the ReactSvgPanZoom props, where I've manually set SVG{Width,Height,MinX,MinY} and viewer{Width,Height} myself

[carlosribas]

Hey @japgolly, take a look at this code to see if it helps: https://github.com/RNAcentral/auto-traveler-embed/blob/862f3c809a512b513207f5b8d3ebe10a0d51c907/src/containers/AutoTraveler/components/Results/index.jsx

I'm not a React expert, but what I did was call the fitToViewer method on componentDidUpdate. I don't know if it's a good approach, but it works.

What I'm trying to do now is to leave the width at 100% instead of a fixed value, any feedback is welcome.

Cheers!

[japgolly]

Ah thank you @carlosribas ! That's a great workaround!

It still causes two renders to occur, one unfitted, and then the second one fitted so I'll leave this ticket open. :)

[carlosribas]

I agree. I would love to know if there is a way to center on first render.

[bkrmalick]

Hi,

Would anyone know how to do the above workaround for a functional implementation?

Thanks,
Bakar.

[bkrmalick]

Hi,

Would anyone know how to do the above workaround for a functional implementation?

Thanks,
Bakar.

In case anyone comes here with the same question:

I applied the same workaround as below in my functional component:

`

const [isFirstRender, setIsFirstRender] = useState(true);
if(viewerRef.current.fitToViewer!==undefined && isFirstRender)
{		
	viewerRef.current.fitToViewer("center", "center");
	setIsFirstRender(false);
}

return (
	<ReactSVGPanZoom
             .
             .
             .
	    ref={viewerRef}
	>);

`