React Spatial View

A React component library that provides a powerful and flexible spatial view with smooth zooming and panning capabilities.

Features

• 🖱️ Smooth zooming with mouse wheel and trackpad gestures
• 🎯 Precise panning with mouse drag
• 🎨 Customizable zoom sensitivity and constraints
• 🔄 Smooth animations with configurable duration
• 📏 Constrained panning within boundaries
• 🎮 Programmatic control through hooks
• 🎯 Jump to specific elements with animation

Installation

npm install @jarigyani/react-spatial-view
# or
yarn add @jarigyani/react-spatial-view

Basic Usage

import { SpatialView, SpatialViewProvider } from '@jarigyani/react-spatial-view';

function App() {
  return (
    <SpatialViewProvider>
      <div style={{ width: '100vw', height: '100vh' }}>
        <SpatialView>
          {/* Your content here */}
          <div>Zoomable and pannable content</div>
        </SpatialView>
      </div>
    </SpatialViewProvider>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | zoomSensitivity | number | 0.2 | Mouse wheel zoom sensitivity | | trackpadZoomSensitivity | number | 0.05 | Trackpad zoom sensitivity | | excludePan | string[] | [] | Selectors for elements to exclude from panning | | constrainPan | boolean | true | Whether to constrain panning within boundaries | | padding | string | "0" | Padding around the content | | minScale | number | 0.1 | Minimum zoom scale | | maxScale | number | 5 | Maximum zoom scale | | initialScale | number | 1 | Initial zoom scale | | initialPosition | { x: number, y: number } | { x: 0, y: 0 } | Initial position | | zoomDuration | number | 50 | Animation duration in milliseconds |

Using the Hook

The useSpatialView hook provides programmatic control over the spatial view:

import { useSpatialView } from '@jarigyani/react-spatial-view';

function MyComponent() {
  const { scale, position, jumpToElement } = useSpatialView();

  const handleClick = () => {
    // Jump to a specific element
    const element = document.getElementById('my-element');
    if (element) {
      jumpToElement(element, { padding: 20 });
    }
  };

  return (
    <div>
      Current scale: {scale}
      <button onClick={handleClick}>Jump to element</button>
    </div>
  );
}

License

MIT