Autosizer example outdated / not working

[Ali Ozturk]

Bug reports:

The provided example of using AutoSizer to automatically adjust width and heigth is not working. I've tried creating an identical example without luck.

https://github.com/chrvadala/react-svg-pan-zoom/blob/master/docs/autosizer-viewer.md
https://codesandbox.io/s/autosizer-react-svg-pan-zoom-issue-newbu

Would love for this to work or perhaps a solution for such use cases

[Christian Vadalà]

You can find an updated example here

react-svg-pan-zoom/storybook/stories/StandardViewer.stories.jsx

Lines 295 to 319 in d276914

 export const Resizable = () => { 
   const Viewer = useRef(null); 
   const [tool, onChangeTool] = useState(TOOL_NONE) 
   const [value, onChangeValue] = useState({}) 
   const [width, height] = useWindowSize({initialWidth: 400, initialHeight: 400}) 
  
   useLayoutEffect(() => { 
     Viewer.current.fitToViewer(); 
   }, []); 
  
   return ( 
     <ReactSVGPanZoom 
       width={width} height={height} 
       ref={Viewer} 
       value={value} onChangeValue={onChangeValue} 
       tool={tool} onChangeTool={onChangeTool} 
     > 
       <svg width={1440} height={1440}> 
         <Snake/> 
       </svg> 
     </ReactSVGPanZoom> 
   ) 
 } 
  
 Resizable.decorators = [(Story) => <div style={{height: '100%', margin: -14}}><Story/></div>] 

This snippet is part of a Pull Request that I'll complete and merge in the following weeks