🔥 Fast, reliable solution to provide panning capabilities across all platforms.
🛠 Lightweight requiring no external dependencies.
🪁 Easy to use and customizable. Integrate your frontend with our context api.
👑 Ability to override default values, provide custom buttons to control zoomin/out/reset.
npm install react-zoomable-container
or....yarn add react-zoomable-container
Please checkout the <Controls>
component for more advance usages.
import { ZoomableContainer } from 'react-zoomable-container'; const App = () => { return ( <ZoomableContainer> <div style={{width: '100%', height: '100%', backgroundColor: 'red'}}> <h1>Zoomable Container</h1> </div> </ZoomableContainer> ) } // or providing custom controls and overrides and controls to lock/unlock pan and zoom! (all optional) import { ZoomableContainer } from 'react-zoomable-container'; const Controls = () => { const { handleReset, zoomIn, zoomOut, info, controls: { pan: { locked: panLocked, setLocked: setPanLock }, zoom: { locked: zoomLocked, setLocked: setZoomLock } } } = useZoomableContext(); return ( <div style={{ position:'absolute', top:0, left:0, zIndex:1000, display:'flex', flexDirection: "row", alignItems:'center', justifyContent:'center', padding:'1em', }}> <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}> <button onClick={handleReset}>Reset</button> <button onClick={zoomIn}>Zoom In</button> <button onClick={zoomOut}>Zoom Out</button> <button onClick={() => setPanLock(!panLocked)}> {panLocked ? 'Unlock Pan' : 'Lock Pan'} </button> <button onClick={() => setZoomLock(!zoomLocked)}> {zoomLocked ? 'Unlock Zoom' : 'Lock Zoom'} </button> </div> <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}> <h5>Scale</h5> <p>{info.scale.toFixed(2)}</p> <h5>Position</h5> <p>{`x: ${info.position.x.toFixed(2)}, y: ${info.position.y.toFixed(2)}`}</p> </div> </div> ) } const App = () => { const overrides = { scale: 0.8, position: { x: -0, y: 0 }, lerpTime: 300, scaleStep: 0.2, minScale: 0.2, maxScale: 2, } return ( <ZoomableContainer customControls={<Controls />} controlOverrides={overrides}> <div style={{width: '100%', height: '100%', backgroundColor: 'red'}}> <h1>Zoomable Container</h1> </div> </ZoomableContainer> ) }
The parent holding the ZoomableContainer determines the Zoomable area and will stick within the parent.
You can also create your own Controls component to add.
Integrate a pinch mechanic
Property name | Type | Default |
---|---|---|
customControls? | Optional ReactNode | ./src/components/Controls.tsx |
controlOverrides? | { scale?: number; position?: { x: number y: number }; lerpTime?: number; scaleStep?: number; minScale?: number; maxScale?: number } |
{ scale: 1, position: { x: 0, y: 0 }, lerpTime: 300, scaleStep: 0.2, minScale: 0, maxScale: 1 } |
Want to contribute? Great!
-
Run the 'yarn' or 'npm install' command at the project root.
yarn npm install
-
After dependancies have installed, run the command below which builds the package to: ./dist/. This uses Rollup to build the package.
yarn build npm run build
-
Inside the project root, run either one of the commands below to link the project locally.
yarn link npm link
-
Then inside of your other project (where you want to use this locally), run one of the commands below.
yarn link react-zoomable-container npm link react-zoomable-container
-
This will now pickup every build change on the other project.
-
Make Pull request with your changes!
MIT