react-zoom-pan-pinch/src/stories/examples/image-medium/image-medium.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/medium-image.jpg";

export const Template = (args) => (
  <TransformWrapper {...normalizeArgs(args)}>
    {(utils) => (
      <div>
        <Controls {...utils} />
        <TransformComponent>
          <img src={exampleImg} alt="" />
        </TransformComponent>
      </div>
    )}
  </TransformWrapper>
);

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

# Medium Image

<br />

### Preview:

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

## Component API

<ArgsTable story="Medium Image" />