search

chrvadala / react-svg-pan-zoom

:eyes: A React component that adds pan and zoom features to SVG
https://chrvadala.github.io/react-svg-pan-zoom/
MIT License
684 stars 126 forks source link

Responsive Display with ReactSVGPanZoom #204

Open KhRania opened 3 years ago

KhRania commented 3 years ago

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!

nikonikoniko commented 3 years ago

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.

leoncraggs commented 3 years ago

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>