wouterraateland / use-pan-and-zoom Goto Github PK

View Code? Open in Web Editor NEW

62.0 0.0 10.0 1.27 MB

👆+🔎 React hook for panning and zooming a container

Home Page: https://codesandbox.io/s/n3rpmj60w0

License: MIT License

JavaScript 3.28% TypeScript 96.72%

react hooks react-hooks ui interaction gestures

use-pan-and-zoom's Introduction

use-pan-and-zoom

👆+🔎 React hook for panning and zooming a container.

Supports touch devices since version 0.4.0.

Installation

yarn add use-pan-and-zoom / npm install use-pan-and-zoom --save

Requirements

This package is a React Hook and therefor requires React 16.8 or newer.

Quick Start

import usePanZoom from "use-pan-and-zoom";

export default function Demo() {
  const { transform, setContainer, panZoomHandlers } = usePanZoom();

  return (
    <div
      ref={(el) => setContainer(el)}
      style={{ touchAction: "none" }}
      {...panZoomHandlers}
    >
      <div style={{ transform }}>
        <p>Drag to 👆 and scroll / pinch to 🔎 me!</p>
      </div>
    </div>
  );
}

Parameters

All parameters are optional

Parameter	Type	Default
`enablePan`	`boolean`	`true`
`enableZoom`	`boolean`	`true`
`requireCtrlToZoom`	`boolean`	`false`
`disableWheel`	`boolean`	`false`
`panOnDrag`	`boolean`	`true`
`preventClickOnPan`	`boolean`	`true`
`zoomSensitivity`	`number`	`0.01`
`minZoom`	`number`	`0`
`maxZoom`	`number`	`Infinity`
`minX`	`number`	`-Infinity`
`maxX`	`number`	`Infinity`
`minY`	`number`	`-Infinity`
`maxY`	`number`	`Infinity`
`initialZoom`	`number`	`1`
`initialPan`	`position`	`{ x: 0, y: 0 }`
`onPanStart`	`(touches: position[], transform: transform) => void`	`() => {}`
`onPan`	`(touches: position[], transform: transform) => void`	`() => {}`
`onPanEnd`	`() => void`	`() => {}`
`onZoom`	`(transform: transform) => void`	`() => {}`

Where:

position = { x: number, y: number }
transform = { x: number, y: number, zoom: number }

Output

Field	Type	Description
`container`	`HTMLElement \| null`	Current container element
`setContainer`	`(HTMLElement \| null) => void`	Sets the container element
`transform`	`string`	CSS string determining the transform
`center`	`position`	Center of container element
`pan`	`position`	Current pixels panned
`zoom`	`number`	Current zoom
`setPan`	`(pan: position) => void`	Set pan imperatively
`setZoom`	`(zoom: number) => void`	Set zoom imperatively
`panZoomHandlers`	`{ ...EventHandler }`	Pass to container element to listen to relevant events

use-pan-and-zoom's People

Contributors

Stargazers

Forkers

vakrim johnrees darthtrevino billlynch yamitzky xcqwan thomfoolery split wanderingwizard87 sfrady20

use-pan-and-zoom's Issues

How can i prevent onWheel event?

Onwheel event can change zoom now, how can i prevent this behavior?

keep center while zooming in/zooming out

Is this dead? @wouterraateland

I love how it works on version 0.1.0:
https://codesandbox.io/s/use-pan-zoom-example-forked-rnfmi?file=/src/index.js:329-345

the latest version moves the content to the right while zooming
https://codesandbox.io/s/n3rpmj60w0?file=/src/App.jsx

Is there any chance of getting a new version with this fixed? or, is it safe to use v0.1.0 on prod or is it buggy?

include requireShiftToZoom

including the option to define the key that activate the zoom behavior besides control would make this solution more flexible (alt, shift, cmd/meta)

[Feature] Fit/Center Support

Add ability to do fit/center both on init and programmatically.

[BUG] Scroll panning doesn't trigger pan event

Given the following setup:

  const onPan = (event) => {
    console.log('pan', event);
  }

  const onZoom = (event) => {
    console.log('zoom', event);
  }

  const { transform, setContainer, panZoomHandlers } = usePanZoom({
    enablePan: true,
    enableZoom: true,
    requireCtrlToZoom: true,
    onPan,
    onZoom
  });

The onPan never fires until I drag on mac.

Two finger panning on trackpad

Looking to implement a two finger panning interface like the canvas of Figma, Framer, and Whimsical. Can this library be adopted to do that?

[BUG] onZoom parameter breaks an app

Hello) Noticed one strange thing if I am trying to parameter 'onZoom' something like onZoom: () => console.log('test') the app is crashing even in an example that u gave. I even try to use debounce, but that doesn't help.
@wouterraateland pls, help needed

Hook does not cause re-render when setContainer() is called.

Thank you for the very handy hook. I have a container-dependent useEffect where I do some calculations based on the transform and the dimensions of the interactive container.

const {
    transform,
    panZoomHandlers,
    setContainer,
    setPan,
    setZoom,
    pan,
    zoom,
    container
  } = usePanZoom();


  useEffect(() => {
    // Do other stuff based on container dimensions & pan/zoom
    // This useEffect won't fire until the user pans/zooms.
    console.log(container ? "Container is valid" : "container is not set");
  }, [pan, zoom, container]);

I worked around it by setting zoom to 1 upon initial render:

  useEffect(() => {
    setZoom(1);
  }, [setZoom]);

See the codesandbox fork for the full example.

https://codesandbox.io/s/use-pan-zoom-example-forked-eg4el?file=/src/app.tsx

I wouldn't necessarily call this a bug, but I would appreciate a pointer in the right direction if there is a better workaround.