# Pan & Scale

> Pan + zoom image viewer integration backed by @panscale/react.

Source: https://gallerykit.n.yatsyk.com/docs/pan-scale

# @gallerykit/pan-scale

**@gallerykit/pan-scale** is a thin integration between GalleryKit's `GalleryItem` shape and the `@panscale/react` pan/zoom engine. Use `<ImagePanScale>` for the typical viewer or drop down to `useGalleryPanScale` and the re-exported `@panscale/react` primitives (`useScaler`, `ScalerView`, `ZoomControls`, `Minimap`) for advanced layouts.

* **Stability:** experimental
* **Peer dependencies:** `react`, `react-dom`
* **Dependencies:** `@gallerykit/core`, `@panscale/react`

## Install

```bash
pnpm add @gallerykit/pan-scale
```

## Quick example

```tsx
import { ImagePanScale } from "@gallerykit/pan-scale";

<ImagePanScale item={{ id: "1", src: "/big-photo.jpg", alt: "" }} />
```

See [Getting Started](./getting-started.mdx) for the full walkthrough and [API](./api.mdx) for the public exports.