react-zoom-pan-pinch/src/stories/examples/content-rerendering/content-updating.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";
import { Example } from "./example";

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

<Meta
  title="Examples/Rerendering content"
  component={TransformWrapper}
  argTypes={{
    ...argsTypes,
    "wheel.excluded": {
      ...argsTypes["wheel.excluded"],
      defaultValue: ["wheelDisabled"],
    },
    "panning.excluded": {
      ...argsTypes["panning.excluded"],
      defaultValue: ["panningDisabled"],
    },
    "pinch.excluded": {
      ...argsTypes["pinch.excluded"],
      defaultValue: ["pinchDisabled"],
    },
    centerOnInit: {
      defaultValue: true,
    },
  }}
/>

# Rerendering content

<br />

### Preview:

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

## Component API

<ArgsTable story="Rerendering content" />