React-zoomable-container NPM

🔭 react-zoomable-container

A react component which allows you to make anything zoomable, pannable and pinchable.

Key Features

🔥 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.

[DEMO] ollymonger.github.io

Installation

npm install react-zoomable-container or.... yarn add react-zoomable-container

Usage

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>
  )
}

How does it work?

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.

Roadmap:

Integrate a pinch mechanic

Available properties

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}

Development

Want to contribute? Great!

Building

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
```

Local testing

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!