Responsive Display with ReactSVGPanZoom

[KhRania]

Hello, I'm working with ReactSVGPanZoom and i want to make the display responsive (for mobile and laptop)
I'm using fitToViewer to set the display width and height.
any help please ?
Thanks!

[Niko]

I would also be interested in a solution for this.

It seems that fitToViewer only works when the component height and width is set to a px value and not a percentage.

for example:

      <UncontrolledReactSVGPanZoom
        ref={vieweRef}
        width={"100%"} height={"100%"}
        tool="auto" />

causes fitToViewer() to throw an error.

[Leon Craggs]

Try -> https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md

      <AutoSizer>
        {({ width, height }) =>(
         <ReactSVGPanZoom
                width={width}
                height={height}
                ...
          >
                 <svg viewBox={`0 0 ${width} ${height}`}></svg>
        </ReactSVGPanZoom>
        )}
     </AutoSizer>