### Cinema Example Setup

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/cinema/cinema.stories.mdx

Imports necessary components and types for the Cinema example. This setup is required to render the interactive cinema hall.

```javascript
import { Meta, Story, ArgsTable, Canvas } from "@storybook/blocks";

import { TransformWrapper } from "../../../components";
import { argsTypes } from "../../types/args.types.ts";
import { Example } from "./example";

export const Template = (args) => <Example {...args} />;

<Meta
  title="Examples/Cinema"
  component={TransformWrapper}
  argTypes={argsTypes}
/>

# Cinema

Zoom, pan, and click on any available seat to focus on it. Use the controls or
pinch / scroll to navigate the hall.

<br />

### Preview:

<Canvas>
  <Story name="Cinema">{(args) => <Template {...args} />}</Story>
</Canvas>

## Component API

<ArgsTable story="Cinema" />
```

--------------------------------

### Example: External System Setup

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/hooks/use-transform-init.stories.mdx

Shows how to use `useTransformInit` to set up an external system, like a canvas, with initial dimensions and scale, and provides a cleanup function.

```typescript
import { useTransformInit } from "react-zoom-pan-pinch";

function CanvasSetup() {
  useTransformInit(({ state, instance }) => {
    const canvas = initExternalCanvas({
      width: instance.wrapperComponent?.offsetWidth ?? 0,
      height: instance.wrapperComponent?.offsetHeight ?? 0,
      initialScale: state.scale,
    });

    return () => {
      canvas.destroy();
    };
  });

  return null;
}
```

--------------------------------

### Image Annotations Storybook Setup

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/image-annotations/image-annotations.stories.mdx

Sets up the Storybook environment for the Image Annotations example, including component imports and the template function.

```javascript
import { Meta, Story, ArgsTable, Canvas } from "@storybook/blocks";

import { TransformWrapper } from "../../../components";
import { argsTypes } from "../../types/args.types.ts";
import { Example } from "./example";

export const Template = (args) => <Example {...args} />;

<Meta
  title="Examples/Image annotations"
  component={TransformWrapper}
  argTypes={argsTypes}
/>
```

--------------------------------

### Miro Storybook Setup

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/miro/miro.stories.mdx

Sets up the Storybook meta information and template for the Miro example. Imports necessary components and types for defining the story.

```javascript
import { Meta, Story, ArgsTable, Canvas } from "@storybook/blocks";

import { TransformWrapper } from "../../../components";
import { argsTypes } from "../../types/args.types.ts";
import { Example } from "./example";

export const Template = (args) => <Example {...args} />;

<Meta title="Examples/Miro" component={TransformWrapper} argTypes={argsTypes} />
```

--------------------------------

### Implement Virtualized Grid with React Zoom Pan Pinch

Source: https://context7.com/bettertyped/react-zoom-pan-pinch/llms.txt

This example demonstrates how to use the Virtualize component to render a large grid of elements efficiently. It includes setup for TransformWrapper and TransformComponent, and configures Virtualize with properties like x, y, width, height, margin, threshold, and placeholders. The onShow and onHide callbacks track the number of mounted tiles.

```jsx
import React, { useState, useCallback } from "react";
import {
  TransformWrapper,
  TransformComponent,
  Virtualize,
} from "react-zoom-pan-pinch";

function VirtualizedGrid() {
  const COLS = 20;
  const ROWS = 20;
  const TILE_SIZE = 150;
  const GAP = 10;
  const TOTAL = COLS * ROWS;

  const [mountedCount, setMountedCount] = useState(0);

  const handleShow = useCallback(() => setMountedCount((c) => c + 1), []);
  const handleHide = useCallback(() => setMountedCount((c) => c - 1), []);

  return (
    <div>
      <div className="stats">
        Mounted: {mountedCount} / {TOTAL} tiles
      </div>

      <TransformWrapper
        minScale={0.1}
        maxScale={4}
        limitToBounds={false}
        centerOnInit
      >
        <TransformComponent
          wrapperStyle={{ width: "100%", height: 600, background: "#0a0a0f" }}
        >
          <div
            style={{
              position: "relative",
              width: COLS * (TILE_SIZE + GAP) + GAP,
              height: ROWS * (TILE_SIZE + GAP) + GAP,
            }}
          >
            {Array.from({ length: TOTAL }, (_, i) => {
              const col = i % COLS;
              const row = Math.floor(i / COLS);
              const x = GAP + col * (TILE_SIZE + GAP);
              const y = GAP + row * (TILE_SIZE + GAP);

              return (
                <Virtualize
                  key={i}
                  x={x}
                  y={y}
                  width={TILE_SIZE}
                  height={TILE_SIZE}
                  margin={100} // Pre-render 100px outside viewport
                  threshold={0} // Any overlap triggers render (0-1)
                  onShow={handleShow}
                  onHide={handleHide}
                  placeholder={
                    <div
                      style={{
                        position: "absolute",
                        left: x,
                        top: y,
                        width: TILE_SIZE,
                        height: TILE_SIZE,
                        borderRadius: 8,
                        border: "1px dashed rgba(255, 255, 255, 0.1)",
                      }}
                    />
                  }
                  style={{
                    position: "absolute",
                    left: x,
                    top: y,
                    width: TILE_SIZE,
                    height: TILE_SIZE,
                  }}
                >
                  <div
                    style={{
                      width: "100%",
                      height: "100%",
                      borderRadius: 8,
                      background: `hsl(${(i * 7) % 360}, 60%, 45%)`,
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      color: "white",
                      fontWeight: 700,
                      fontSize: 18,
                    }}
                  >
                    Tile {i + 1}
                  </div>
                </Virtualize>
              );
            })}
          </div>
        </TransformComponent>
      </TransformWrapper>
    </div>
  );
}

```

--------------------------------

### Install react-zoom-pan-pinch with npm

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/docs/Introduction.stories.mdx

Use npm to install the react-zoom-pan-pinch library.

```bash
npm install react-zoom-pan-pinch
```

--------------------------------

### Install react-zoom-pan-pinch with yarn

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/docs/Introduction.stories.mdx

Use yarn to install the react-zoom-pan-pinch library.

```bash
yarn add react-zoom-pan-pinch
```

--------------------------------

### Initialize Transform System with useTransformInit

Source: https://context7.com/bettertyped/react-zoom-pan-pinch/llms.txt

This hook fires a callback once when the transform system is fully initialized with wrapper and content components mounted. It's useful for performing initial setup or getting initial dimensions. The hook can optionally return a cleanup function.

```jsx
import React, { useState } from "react";
import {
  TransformWrapper,
  TransformComponent,
  useTransformInit,
} from "react-zoom-pan-pinch";

function InitializedViewer() {
  const [dimensions, setDimensions] = useState(null);

  useTransformInit(({ instance, state }) => {
    const wrapper = instance.wrapperComponent;
    const content = instance.contentComponent;

    if (wrapper && content) {
      setDimensions({
        wrapperWidth: wrapper.offsetWidth,
        wrapperHeight: wrapper.offsetHeight,
        contentWidth: content.offsetWidth,
        contentHeight: content.offsetHeight,
        initialScale: state.scale,
      });
    }

    console.log("Transform system initialized with scale:", state.scale);

    // Optional cleanup function
    return () => {
      console.log("Cleanup on unmount");
    };
  });

  return (
    <div>
      {dimensions && (
        <div className="info">
          Wrapper: {dimensions.wrapperWidth}x{dimensions.wrapperHeight} |
          Content: {dimensions.contentWidth}x{dimensions.contentHeight}
        </div>
      )}
    </div>
  );
}

function App() {
  return (
    <TransformWrapper centerOnInit>
      <InitializedViewer />
      <TransformComponent>
        <img src="large-image.jpg" alt="Content" />
      </TransformComponent>
    </TransformWrapper>
  );
}
```

--------------------------------

### Basic Zoom and Pan Setup

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/README.md

Use this basic setup for simple zoom and pan functionality. Ensure TransformWrapper and TransformComponent are imported.

```jsx
import React, { Component } from "react";

import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

const Example = () => {
  return (
    <TransformWrapper>
      <TransformComponent>
        <img src="image.jpg" alt="test" />
      </TransformComponent>
    </TransformWrapper>
  );
};

```

--------------------------------

### Import necessary components for Storybook

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/keep-scale/map.stories.mdx

Imports components from @storybook/blocks and the local TransformWrapper, args types, and example component. This setup is standard for Storybook documentation.

```javascript
import { Meta, Story, ArgsTable, Canvas } from "@storybook/blocks";

import { TransformWrapper } from "../../../components";
import { argsTypes } from "../../types/args.types";
import { Example } from "./example";
```

--------------------------------

### Install React Zoom Pan Pinch

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/README.md

Use npm or yarn to add the react-zoom-pan-pinch package to your project.

```bash
npm install --save react-zoom-pan-pinch
or
yarn add react-zoom-pan-pinch
```

--------------------------------

### Zoomed Out Content Example

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/image-zoomed-out/image-zoomed-out.stories.mdx

This example demonstrates how to set an initial scale below 1 to display content zoomed out, allowing users to see the full picture at a glance. It also sets a minimum scale to control how far the user can zoom out. The `centerOnInit` prop ensures the content is centered in the viewport when the component loads.

```APIDOC
## TransformWrapper with Zoomed Out Content

### Description
This example shows how to configure the `TransformWrapper` component to display its content at an initial scale less than 1, effectively zooming out the content. It also sets a minimum zoom level and centers the content upon initialization.

### Method
N/A (This is a component configuration example)

### Endpoint
N/A (This is a component configuration example)

### Parameters
#### Props for TransformWrapper
- **initialScale** (number) - Optional - The initial scale of the content. Set below 1 to start zoomed out.
- **minScale** (number) - Optional - The minimum scale the user can zoom to. Set below `initialScale` to allow zooming out further than the initial view.
- **centerOnInit** (boolean) - Optional - If true, the content will be centered in the viewport when the component first mounts.

### Request Example
```jsx
<TransformWrapper initialScale={0.4} minScale={0.2} centerOnInit={true}>
  {(utils) => (
    <>
      <Controls {...utils} />
      <div style={{ position: "relative", display: "inline-block" }}>
        <TransformComponent
          wrapperStyle={{
            width: "500px",
            height: "500px",
            maxWidth: "80vw",
            maxHeight: "75vh",
          }}>
          <img style={{ width: "100%" }} src={exampleImg} alt="" />
        </TransformComponent>
        <ScaleBadge />
      </div>
    </>
  )}
</TransformWrapper>
```

### Response
N/A (This is a component configuration example)

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Configure Storybook Meta for Map Example

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/keep-scale/map.stories.mdx

Configures the metadata for the Storybook story, specifying the title, component, and argument types for the 'Map' example.

```javascript
<Meta
  title="Examples/Map"
  component={TransformWrapper}
  argTypes={argsTypes}
/>
```

--------------------------------

### Keep Scale Component Usage Example

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/keep-scale/keep-scale.stories.mdx

Demonstrates how to use the Storybook Canvas to render a story for the Keep Scale component. This setup is for Storybook's documentation and testing environment.

```javascript
<Canvas>
  <Story name="Keep Scale">{(args) => <Template {...args} />}</Story>
</Canvas>
```

--------------------------------

### External System Setup with useTransformInit

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/hooks/use-transform-init.stories.mdx

Demonstrates using useTransformInit to set up an external system, like a canvas, with initial dimensions and scale. Includes a cleanup function to destroy the canvas on unmount.

```tsx
function CanvasSetup() {
  useTransformInit(({ state, instance }) => {
    const canvas = initExternalCanvas({
      width: instance.wrapperComponent?.offsetWidth ?? 0,
      height: instance.wrapperComponent?.offsetHeight ?? 0,
      initialScale: state.scale,
    });

    return () => {
      canvas.destroy();
    };
  });

  return null;
}
```

--------------------------------

### Basic Setup with TransformWrapper and TransformComponent

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/docs/Introduction.stories.mdx

The simplest way to set up react-zoom-pan-pinch is to wrap your content with TransformWrapper and TransformComponent.

```tsx
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

const App = () => (
  <TransformWrapper>
    <TransformComponent>
      <img src="image.jpg" alt="Zoomable" />
    </TransformComponent>
  </TransformWrapper>
);
```

--------------------------------

### Stadium Seating Example Component

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/stadium/stadium.stories.mdx

The main component for the stadium seating example, utilizing TransformWrapper for zoom and pan functionality.

```jsx
export const Template = (args) => <Example {...args} />;
```

--------------------------------

### Example: Custom Scale Logger with useTransformContext

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/hooks/use-transform-context.stories.mdx

This example demonstrates how to use useTransformContext to log the scale changes. It subscribes to the onChange event and logs the current scale whenever it changes. Ensure this hook is used within a TransformWrapper component.

```tsx
import { useEffect } from "react";
import { useTransformContext } from "react-zoom-pan-pinch";

function useLogScale() {
  const ctx = useTransformContext();

  useEffect(() => {
    const unsub = ctx.onChange((ref) => {
      console.log("Scale:", ref.instance.state.scale);
    });
    return unsub;
  }, [ctx]);
}
```

--------------------------------

### Storybook Meta Configuration

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/product-card/product-card.stories.mdx

Configures Storybook metadata for the Product Card example, specifying the component, title, and argument types.

```javascript
import { Meta, Story, ArgsTable, Canvas } from "@storybook/blocks";

import { TransformWrapper } from "../../../components";
import { argsTypes } from "../../types/args.types.ts";
import { Example } from "./example";

export const Template = (args) => <Example {...args} />;

<Meta
  title="Examples/Product card"
  component={TransformWrapper}
  argTypes={argsTypes}
/>
```

--------------------------------

### Basic TransformWrapper Setup

Source: https://context7.com/bettertyped/react-zoom-pan-pinch/llms.txt

Use TransformWrapper to manage transformation state and user interactions. Configure initial state, scale limits, and event callbacks.

```jsx
import React from "react";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

function ImageViewer() {
  return (
    <TransformWrapper
      initialScale={1}
      initialPositionX={0}
      initialPositionY={0}
      minScale={0.5}
      maxScale={8}
      limitToBounds={true}
      centerOnInit={true}
      smooth={true}
      wheel={{
        step: 0.015,
        disabled: false,
        wheelDisabled: false,
        touchPadDisabled: false,
        activationKeys: [],
        excluded: [],
      }}
      panning={{
        disabled: false,
        velocityDisabled: false,
        lockAxisX: false,
        lockAxisY: false,
        allowLeftClickPan: true,
        allowMiddleClickPan: true,
        allowRightClickPan: true,
        activationKeys: [],
        excluded: [],
      }}
      pinch={{
        step: 5,
        disabled: false,
        allowPanning: true,
        excluded: [],
      }}
      doubleClick={{
        disabled: false,
        step: 0.7,
        mode: "zoomIn", // "zoomIn" | "zoomOut" | "reset" | "toggle"
        animationTime: 200,
        animationType: "easeOut",
        excluded: [],
      }}
      zoomAnimation={{
        disabled: false,
        size: 0.4,
        animationTime: 200,
        animationType: "easeOut",
      }}
      velocityAnimation={{
        disabled: false,
        sensitivityMouse: 1,
        sensitivityTouch: 1.2,
        maxStrengthMouse: 20,
        maxStrengthTouch: 40,
        inertia: 1,
        animationTime: 300,
        maxAnimationTime: 800,
        animationType: "easeOut",
      }}
      onInit={(ref) => console.log("Initialized:", ref.state)}
      onTransform={(ref, state) => console.log("Transform:", state)}
      onPanningStart={(ref, event) => console.log("Panning started")}
      onPanning={(ref, event) => console.log("Panning")}
      onPanningStop={(ref, event) => console.log("Panning stopped")}
      onZoomStart={(ref, event) => console.log("Zoom started")}
      onZoom={(ref, event) => console.log("Zooming")}
      onZoomStop={(ref, event) => console.log("Zoom stopped")}
      onPinchStart={(ref, event) => console.log("Pinch started")}
      onPinch={(ref, event) => console.log("Pinching")}
      onPinchStop={(ref, event) => console.log("Pinch stopped")}
      onWheelStart={(ref, event) => console.log("Wheel started")}
      onWheel={(ref, event) => console.log("Wheeling")}
      onWheelStop={(ref, event) => console.log("Wheel stopped")}
    >
      <TransformComponent>
        <img src="large-image.jpg" alt="Zoomable content" />
      </TransformComponent>
    </TransformWrapper>
  );
}

```

--------------------------------

### Example Usage of useControls Hook

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/hooks/use-controls.stories.mdx

Demonstrates how to use the useControls hook within a Toolbar component to trigger zoom, reset, and center actions on buttons. This example requires TransformWrapper and TransformComponent from 'react-zoom-pan-pinch'.

```tsx
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import { useControls } from "react-zoom-pan-pinch";

function Toolbar() {
  const { zoomIn, zoomOut, resetTransform, centerView } = useControls();

  return (
    <div className="toolbar">
      <button onClick={() => zoomIn()}>Zoom In</button>
      <button onClick={() => zoomOut()}>Zoom Out</button>
      <button onClick={() => resetTransform()}>Reset</button>
      <button onClick={() => centerView()}>Center</button>
    </div>
  );
}

function App() {
  return (
    <TransformWrapper>
      <Toolbar />
      <TransformComponent>
        <img src="map.jpg" alt="Map" />
      </TransformComponent>
    </TransformWrapper>
  );
}
```

--------------------------------

### Free Panning Example

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/axis-lock/axis-lock.stories.mdx

Demonstrates the default free panning behavior without any axis restrictions. Use this when movement is allowed in all directions.

```javascript
import React from "react";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

const App = () => (
  <TransformWrapper panning={{ disabled: false }}>
    <TransformComponent>
      <img src="/path/to/your/image.jpg" alt="scalable image" />
    </TransformComponent>
  </TransformWrapper>
);

export default App;
```

--------------------------------

### Storybook Meta Configuration

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/stadium/stadium.stories.mdx

Configures the Storybook metadata for the Stadium example, including the component, title, and argTypes.

```jsx
import { Meta, Story, ArgsTable, Canvas } from "@storybook/blocks";

import { TransformWrapper } from "../../../components";
import { argsTypes } from "../../types/args.types.ts";
import { Example } from "./example";

export const Template = (args) => <Example {...args} />;

<Meta
  title="Examples/Stadium"
  component={TransformWrapper}
  argTypes={argsTypes}
/>
```

--------------------------------

### Import necessary components for Storybook

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/medical-viewer/medical-viewer.stories.mdx

Imports components from '@storybook/blocks' and local files for creating Storybook stories and examples.

```javascript
import { Meta, Story, ArgsTable, Canvas } from "@storybook/blocks";

import { TransformWrapper } from "../../../components";
import { argsTypes } from "../../types/args.types.ts";
import { Example } from "./example";
```

--------------------------------

### Read Initial Dimensions with useTransformInit

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/hooks/use-transform-init.stories.mdx

Example of using useTransformInit to read the dimensions of the wrapper component once it's ready. The callback logs the offsetWidth and offsetHeight.

```tsx
import { useTransformInit } from "react-zoom-pan-pinch";

function Setup() {
  useTransformInit(({ instance }) => {
    const wrapper = instance.wrapperComponent;
    if (wrapper) {
      console.log("Viewport:", wrapper.offsetWidth, "x", wrapper.offsetHeight);
    }
  });

  return null;
}
```

--------------------------------

### Storybook Canvas for Mini Map Example

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/mini-map/mini-map.stories.mdx

Render the Mini Map component within a Storybook Canvas using a provided Template and arguments.

```javascript
<Canvas>
  <Story name="Mini Map">{(args) => <Template {...args} />}</Story>
</Canvas>
```

--------------------------------

### Storybook Canvas and Story

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/stadium/stadium.stories.mdx

Renders the Stadium example within a Storybook Canvas, allowing for interactive testing and visualization.

```jsx
<Canvas>
  <Story name="Stadium">{(args) => <Template {...args} />}</Story>
</Canvas>
```

--------------------------------

### Image Zoom/Pan Setup

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/image/image.stories.mdx

Wrap your image component with TransformWrapper and TransformComponent to enable zoom and pan. Ensure the parent container has defined dimensions for proper scaling.

```jsx
import { Meta, Story, ArgsTable, Canvas } from "@storybook/blocks";

import { TransformWrapper } from "../../../components";
import { argsTypes } from "../../types/args.types.ts";
import { Example } from "./example";

export const Template = (args) => (
  <div
    style={{
      width: "100%",
      maxWidth: 640,
      height: "min(420px, 52vh)",
      margin: "0 auto",
      boxSizing: "border-box",
    }}
  >
    <Example {...args} />
  </div>
);

<Meta
  title="Basic/Image"
  component={TransformWrapper}
  argTypes={argsTypes}
/>

# Image

The most common use-case: wrap an **image** in `TransformWrapper` and
`TransformComponent` to make it zoomable and pannable. The preview is sized like
**Responsive Image** so it stays inside the Storybook canvas (`max-width` 640px,
`height: min(420px, 52vh)`). The viewer fills that area; use the **tab switcher**
below to swap between three image sizes and see how the library handles
different content dimensions.

Pan by dragging, zoom with the scroll wheel or pinch gesture, and use the
floating controls to zoom in, zoom out, reset, or center the view. The scale
badge in the corner tracks the current zoom level in real time.

<Canvas>
  <Story name="Image">{(args) => <Template {...args} />}</Story>
</Canvas>

## Component API

<ArgsTable story="Image" />
```

--------------------------------

### TransformWrapper Component API

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/miro/miro.stories.mdx

API documentation for the TransformWrapper component as used in the Miro example. This includes available props and their descriptions.

```APIDOC
## TransformWrapper Component API

### Description
Provides the core functionality for zoom and pan interactions on a given element. It manages the transformation state and applies CSS transforms.

### Method
N/A (Component API)

### Endpoint
N/A (Component API)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
N/A

### Props
#### `initialScale` (number) - Optional - The initial scale of the content.
#### `initialPosition` (object) - Optional - The initial position of the content. Example: `{ x: 0, y: 0 }`.
#### `minScale` (number) - Optional - The minimum allowed scale.
#### `maxScale` (number) - Optional - The maximum allowed scale.
#### `limitToBounds` (boolean) - Optional - Whether to limit the panning to stay within the bounds of the parent element.
#### `enablePadding` (boolean) - Optional - Whether to enable padding when zooming out.
#### `animation` (object) - Optional - Configuration for animations during zoom/pan. Example: `{ disabled: false, duration: 300 }`.
#### `pinch` (object) - Optional - Configuration for pinch-to-zoom gestures. Example: `{ disabled: false, step: 5 }`.
#### `wheel` (object) - Optional - Configuration for mouse wheel zoom. Example: `{ disabled: false, step: 1 }`.
#### `keyEvents` (object) - Optional - Configuration for keyboard-based controls. Example: `{ disabled: false, panning: { key: 'p', modifier: 'ctrl' } }`.
#### `activationKeys` (function) - Optional - A function that determines if activation keys are pressed. Receives an object with `shiftKey`, `ctrlKey`, `altKey`, `metaKey` and returns a boolean.
#### `children` (ReactNode) - Required - The content to be made zoomable and pannable.
```

--------------------------------

### Storybook Meta Configuration for Medical Viewer

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/medical-viewer/medical-viewer.stories.mdx

Configures the Storybook metadata for the 'Medical viewer' example, specifying the component, title, and argument types.

```javascript
<Meta
  title="Examples/Medical viewer"
  component={TransformWrapper}
  argTypes={argsTypes}
/>
```

--------------------------------

### Storybook Meta Configuration

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/center-zoomed-out/center-zoomed-out.stories.mdx

Storybook metadata configuration for the 'Center Zoomed Out' example. It specifies the title, component, and argument types for the story.

```jsx
<Meta
  title="Basic/Center Zoomed Out"
  component={TransformWrapper}
  argTypes={argsTypes}
/>
```

--------------------------------

### Import necessary components for Storybook

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/zoom-to-element/zoom-to-element.stories.mdx

Imports components from '@storybook/blocks' and the library's components for use in Storybook stories. Ensure these components are correctly installed and accessible.

```javascript
import { Meta, Story, ArgsTable, Canvas } from "@storybook/blocks";

import { TransformWrapper, TransformComponent } from "../../../components";
import { argsTypes } from "../../types/args.types";
import { Example } from "./example";
```

--------------------------------

### Example: Get Wrapper Dimensions with useTransformContext

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/hooks/use-transform-context.stories.mdx

This example shows how to retrieve the dimensions of the wrapper component using useTransformContext. It accesses the wrapperComponent DOM element and returns its offsetWidth and offsetHeight. Returns { width: 0, height: 0 } if the wrapper is not available.

```tsx
function useWrapperSize() {
  const ctx = useTransformContext();
  const wrapper = ctx.wrapperComponent;

  if (!wrapper) return { width: 0, height: 0 };
  return {
    width: wrapper.offsetWidth,
    height: wrapper.offsetHeight,
  };
}
```

--------------------------------

### Responsive Image Viewer Setup

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/image-responsive/image-responsive.stories.mdx

Sets up the Storybook environment for the responsive image component, including imports and the main template function. The template ensures the image viewer fits within a defined container size.

```jsx
import { Meta, Story, ArgsTable, Canvas } from "@storybook/blocks";

import { TransformComponent, TransformWrapper } from "../../../components/";
import { argsTypes } from "../../types/args.types";
import { Example } from "./example";

export const Template = (args) => (
  <div
    style={{
      width: "100%",
      maxWidth: 640,
      height: "min(420px, 52vh)",
      margin: "0 auto",
      boxSizing: "border-box",
    }}
  >
    <Example {...args} />
  </div>
);

<Meta
  title="Basic/Responsive Image"
  component={TransformWrapper}
  argTypes={argsTypes}
/>

# Responsive Image

A **responsive** image viewer that automatically scales the image to fit its
container. The preview is sized to stay inside the Storybook canvas (`max-width`
640px, `height: min(420px, 52vh)`). A **`ResizeObserver`** on the outer frame
remeasures when the preview area changes, so the fit scale stays correct without
relying only on `window` resize.

The component measures the container and the image's natural dimensions, then
computes a fit scale (`Math.min(containerW / naturalW, containerH / naturalH)`).
That scale becomes both `initialScale` and `minScale`, so the user can zoom in
up to 8x but can never zoom out beyond the fitted view. The `key` prop on
`TransformWrapper` forces a clean remount when the measured size changes — a
simple pattern that keeps centering correct after layout changes.

The floating badge in the corner tracks the current scale in real time via
`useTransformComponent`.

<Canvas>
  <Story name="Responsive Image">{(args) => <Template {...args} />}</Story>
</Canvas>

## Component API

<ArgsTable story="Responsive Image" />
```

--------------------------------

### Basic Virtualize Usage

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/virtualize/virtualize.stories.mdx

Demonstrates how to wrap an element with Virtualize within a TransformWrapper and TransformComponent. The parent div needs a defined relative size for Virtualize to function correctly. Ensure the content inside Virtualize is positioned and sized appropriately.

```tsx
<TransformWrapper>
  <TransformComponent>
    <div style={{ position: "relative", width: 4000, height: 4000 }}>
      <Virtualize x={100} y={200} width={300} height={150} margin={50}>
        <MyExpensiveWidget />
      </Virtualize>
    </div>
  </TransformComponent>
</TransformWrapper>
```

--------------------------------

### Map Component API

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/keep-scale/map.stories.mdx

API documentation for the TransformWrapper component as used in the Map example.

```APIDOC
## TransformWrapper Component API

### Description
Provides zoom, pan, and pinch functionalities for its children.

### Method
N/A (Component API)

### Endpoint
N/A (Component API)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Error Handling for useTransformContext

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/hooks/use-transform-context.stories.mdx

An example of the error message thrown when useTransformContext is called outside of a TransformWrapper component.

```text
Error: Transform context must be placed inside TransformWrapper
```

--------------------------------

### Import Storybook Meta and Props

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/docs/props.stories.mdx

Imports necessary components and prop definitions for Storybook documentation. Ensure these files are correctly referenced.

```tsx
import { Meta } from "@storybook/blocks";
import { componentProps, wrapperProps } from "./props.tsx";
import { PropTable } from "./PropTable.tsx";
```

--------------------------------

### Cinema Component API

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/cinema/cinema.stories.mdx

API documentation for the TransformWrapper component as used in the Cinema example. This includes all available props and their descriptions.

```APIDOC
## TransformWrapper API (Cinema Example)

### Description
Provides functionality for zooming, panning, and interacting with content. In the Cinema example, it allows users to navigate a hall and focus on specific seats.

### Method
N/A (Component API)

### Endpoint
N/A (Component API)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
N/A

### Props Table
(Refer to the ArgsTable in the Storybook documentation for detailed props)

**Common Props:**
- **initialScale** (number) - The initial scale of the content.
- **initialPositionX** (number) - The initial X position of the content.
- **initialPositionY** (number) - The initial Y position of the content.
- **minScale** (number) - The minimum allowed scale.
- **maxScale** (number) - The maximum allowed scale.
- **limitToBounds** (boolean) - Whether to limit panning to the bounds of the content.
- **disabled** (boolean) - Whether to disable the zoom and pan functionality.
- **pinchDisabled** (boolean) - Whether to disable pinch gestures.
- **wheelDisabled** (boolean) - Whether to disable mouse wheel gestures.
- **doubleClickDisabled** (boolean) - Whether to disable double-click to zoom.
- **zoomText** (string) - Text for zoom buttons.
- **zoomInText** (string) - Text for zoom in button.
- **zoomOutText** (string) - Text for zoom out button.
- **resetText** (string) - Text for reset button.
- **pinchSpeed** (number) - Speed of pinch zoom.
- **wheelSpeed** (number) - Speed of wheel zoom.
- **padding** (object) - Padding around the content.
- **centerZoomedOut** (boolean) - Center content when zoomed out.
- **centerContent** (boolean) - Center content.
- **disablePan** (boolean) - Disable panning.
- **disableZoom** (boolean) - Disable zooming.
- **smoothMove** (boolean) - Enable smooth movement.
- **velocity** (boolean) - Enable velocity-based panning.
- **scalePadding** (object) - Padding for scale.
- **onZoomStart** (function) - Callback when zoom starts.
- **onZoom** (function) - Callback when zoom occurs.
- **onZoomEnd** (function) - Callback when zoom ends.
- **onPanStart** (function) - Callback when pan starts.
- **onPan** (function) - Callback when pan occurs.
- **onPanEnd** (function) - Callback when pan ends.
- **onStateChange** (function) - Callback when the state changes.
- **onInit** (function) - Callback when the component initializes.
- **onClick** (function) - Callback when the content is clicked.

**Cinema Specific Props (from Example):**
- **seats** (array) - Array of seat objects, each with properties like `id`, `x`, `y`, `width`, `height`.
- **onSeatClick** (function) - Callback when a seat is clicked, typically used to focus the view on the selected seat.
```

--------------------------------

### Configure Activation Keys for Panning and Zooming

Source: https://context7.com/bettertyped/react-zoom-pan-pinch/llms.txt

Customize which keys activate panning and wheel zooming. You can use an array of key names or a custom function for more complex logic.

```jsx
import React from "react";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

function KeyActivatedViewer() {
  return (
    <TransformWrapper
      panning={{
        // Only allow panning when Space key is held
        activationKeys: ["Space"],
        disabled: false,
      }}
      wheel={{
        // Only allow wheel zoom when Ctrl/Cmd is held
        activationKeys: ["Control", "Meta"],
        disabled: false,
      }}
    >
      <TransformComponent>
        <div style={{ width: 800, height: 600 }}>
          <p>Hold Space to pan, Ctrl/Cmd + scroll to zoom</p>
          <img src="large-image.jpg" alt="Content" />
        </div>
      </TransformComponent>
    </TransformWrapper>
  );
}

```

```jsx
import React from "react";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

function CustomKeyLogicViewer() {
  return (
    <TransformWrapper
      panning={{
        // Custom function for complex key combinations
        activationKeys: (pressedKeys) => {
          // Require Shift + Space to be pressed
          return pressedKeys.includes("Shift") && pressedKeys.includes(" ");
        },
        disabled: false,
      }}
      wheel={{
        // Require Alt OR Ctrl for wheel zoom
        activationKeys: (pressedKeys) => {
          return pressedKeys.includes("Alt") || pressedKeys.includes("Control");
        },
        disabled: false,
      }}
    >
      <TransformComponent>
        <img src="image.jpg" alt="Custom key activated" />
      </TransformComponent>
    </TransformWrapper>
  );
}

```

--------------------------------

### Import necessary components for Storybook

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/initial-transform/initial-transform.stories.mdx

Imports components from '@storybook/blocks' and local files for creating Storybook stories.

```javascript
import { Meta, Story, ArgsTable, Canvas } from "@storybook/blocks";

import { TransformWrapper } from "../../../components";
import { argsTypes } from "../../types/args.types.ts";
import { Example } from "./example";

export const Template = (args) => <Example {...args} />;
```

--------------------------------

### Image Annotations Storybook Canvas

Source: https://github.com/bettertyped/react-zoom-pan-pinch/blob/master/src/stories/examples/image-annotations/image-annotations.stories.mdx

Renders the Image Annotations example within a Storybook Canvas, allowing for interactive testing with provided arguments.

```javascript
<Canvas>
  <Story name="Image annotations">
    {(args) => <Template {...args} />}
  </Story>
</Canvas>
```