react-zoom-pan-pinch/src/stories/examples/image-zoomed-out/image-zoomed-out.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)}
    initialScale={0.4}
    minScale={0.2}
    centerOnInit={true}
  >
    {(utils) => (
      <div>
        <Controls {...utils} />
        <TransformComponent>
          <img src={exampleImg} alt="" />
        </TransformComponent>
      </div>
    )}
  </TransformWrapper>
);

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

# Zoomed Out

<br />

### Preview:

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

## Component API

<ArgsTable story="Zoomed Out" />