autosizer-viewer.md

React SVG Pan Zoom - Autosizer viewer

React SVG Pan Zoom requires the properties width and height to be set in order to work properly. If you need to automatically adapt the viewer size on the parent size you can use the component AutoSizer. This component is able to extract width and height from the parent box and pass them to a children component.

Example

import {AutoSizer} from 'react-virtualized';

<div style={{width: "100%", height: "100%"}}>
    <AutoSizer>
      {(({width, height}) => width === 0 || height === 0 ? null : (
        <ReactSVGPanZoom  width={width} height={height}>
          <svg width={1440} height={1440}>
            <g>
              <rect x="400" y="40" width="100" height="200" fill="#4286f4" stroke="#f4f142"/>
              <circle cx="108" cy="108.5" r="100" fill="#0ff" stroke="#0ff"/>
              <circle cx="180" cy="209.5" r="100" fill="#ff0" stroke="#ff0"/>
              <circle cx="220" cy="109.5" r="100" fill="#f0f" stroke="#f0f"/>
            </g>
          </svg>
        </ReactSVGPanZoom>
      ))}
    </AutoSizer>
  </div>