react-zoom-pan-pinch/src/stories/examples/image-big/image-big.stories.mdx

Zoom and pan html elements in easy way

import { Meta, Story, ArgsTable, Canvas } from "@storybook/addon-docs/blocks";
import { action } from "@storybook/addon-actions";

import { TransformWrapper, TransformComponent } from "../../../components";
import { argsTypes } from "../../types/args.types.ts";
import { normalizeArgs, Controls } from "../../utils";

import exampleImg from "../../assets/big-image.jpeg";

export const Template = (args) => (
  <TransformWrapper {...normalizeArgs(args)}>
    {(utils) => (
      <div>
        <Controls {...utils} />
        <TransformComponent
          wrapperStyle={{ maxWidth: "100%", maxHeight: "calc(100vh - 50px)" }}
        >
          <img src={exampleImg} alt="" />
        </TransformComponent>
      </div>
    )}
  </TransformWrapper>
);

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

# Big Image

<br />

### Preview:

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

## Component API

<ArgsTable story="Big Image" />