aarondail / react-zoomable-ui

Build zoomable UI with React

React Zoomable UI

Make your HTML elements and React components zoomable, and build interesting zoomable UIs. Supports zooming and panning via touch and mouse interactions.

Features

• Make your whole page zoomable and pan-able, or just part of it.
• The zoomable space can be as large as you want, or bounded (x, y, and/or zoom).
• Has events for different interactions, letting you control how the library responds to mouse clicks and touches.
• Includes a basic Pressable component that can distinguish between panning, tapping, and long-tapping. It can also be used to implement more advanced interactions like dragging.
• Has TypeScript types.
• Supports animations.
• Technically can be used w/o React.

Browser Support

Tested and works on:

• Desktop Chrome, Firefox, Safari.
• Mobile Chrome, and Mobile Safari.
• Tested w/ a mouse, but not touch, on pre-Chromium Edge.

Not tested on, but ideally should work:

• post-Chromium Edge, mouse and touch
• pre-Chromium Edge, touch

Not supported:

• IE 11 and below
• Anything else not mentioned

Please send me issues if you run into problems.

Examples

https://aarondail.github.io/react-zoomable-ui/example/

Basic Usage

Making your entire page zoomable

html,
body,
#root {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#root {
  position: relative;
}

import React from 'react';
import ReactDOM from 'react-dom';
import { Space } from 'react-zoomable-ui';

function App() {
  return (
    <Space>
      <h1>Howdy</h1>
      <div>Try panning an zooming</div>
    </Space>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Making one area zoomable

import { Space } from 'react-zoomable-ui';

import mountain from "./mountain.jpg";

const imageWidth = 1280;
const imageHeight = 960;

function ZoomableImage() {
  return (
    <div style={{ width: 300, height: 300, position: "relative" }}>
      <Space
        style={{ border: "solid 1px black" }}
        onCreate={viewPort => {
          viewPort.setBounds({ x: [0, imageWidth], y: [0, imageHeight] });
          viewPort.camera.centerFitAreaIntoView({
            left: 0,
            top: 0,
            width: imageWidth,
            height: imageHeight
          });
        }}
      >
        <img src={mountain} width={imageWidth} height={imageHeight} alt="A Mountain" />
      </Space>
    </div>

Documentation

• Guide
• API

License

MIT

react-zoomable-ui's Issues

How to detect onPanning?

Hi, firstly thanks for the amazing library. I'll be using it at my next big project, it has a great documentation however I couldn't find a way to handle onPanning. Basically what I'm trying to do is prevent click event while panning so I'd like to detect panning state.

Thank you.

Navigator is not defined

doesnt work in next js app router

IT was working in next js pages router. I ported it to app router, it doesn't work. Drag, wheel nothing works

combining with react-rnd

This isn't an issue, more of a question. I'm using react-zoomable-ui to power a figma-like canvas with draggable, resizable frames.

Rather than using <Pressable> as shown on the example site, I was actually able to combine react-zoomable-ui with react-rnd by rendering the <Rnd> component inside a <NoPanArea>. The approach works really well and doesn't require anything hacky.

Not sure what kinds of use cases users of this library have, but if you think others would benefit, I'd be happy to put together a codesandbox link showing the approach. Let me know!

Possible to Zoom to a div with an ID on Click

Is it possible to Zoom to a specific div with any Selector like ID or Class name on button click?

canvas flashes with default position/zoom before moving

I'm using onCreate to give the canvas a starting position/zoom that is different than the default position/zoom. According to the documentation, onCreate is supposed to give me an opportunity to move the viewport around before the inner div is rendered. However, am seeing the inner div render before the viewport updates, resulting in a flash of incorrectly positioning children before they snap to the correct location.

My code looks like this, nothing fancy:

onCreate={(viewPort) => {
  const { left, top, zoom } = canvasPosition;
  viewPort.camera.updateTopLeft(left, top, zoom);
}}

Any idea why it isn't worked as expected?