react-zoom-pan-pinch/src/stories/docs/props.stories.mdx

Zoom and pan html elements in easy way

import { Meta } from "@storybook/addon-docs/blocks";

import { componentProps, wrapperProps } from "./props.tsx";
import { Code } from "../utils";

<Meta title="Docs/Props" />

# TransformComponent Props

List of props

<table className="props-table">
  <thead>
    <tr>
      <th>
        Name
      </th>
      <th>
        Type
      </th>
      <th>
        Default
      </th>
      <th>
        Description
      </th>
    </tr>
  </thead>
  <tbody>
    {componentProps.map(row => (
      <tr className={row.isObjectRow ? "is-object-row" : ""}>
        <td>
          {row.name}
        </td>
        <td>
          {row.type.map(type => (<Code code={type} />))}
        </td>
        <td>
          <Code code={row.defaultValue} />
        </td>
        <td>
          {row.description}
        </td>
      </tr>
    ))}
  </tbody>

</table>

<br />

# TransformWrapper Props

List of props

<table className="props-table">
  <thead>
    <tr>
      <th>
        Name
      </th>
      <th>
        Type
      </th>
      <th>
        Default
      </th>
      <th>
        Description
      </th>
    </tr>
  </thead>
  <tbody>
    {wrapperProps.map(row => (
      <tr className={row.isObjectRow ? "is-object-row" : ""}>
        <td>
          {row.name}
        </td>
        <td>
          {row.type.map(type => (<Code code={type} />))}
        </td>
        <td>
          <Code code={row.defaultValue} />
        </td>
        <td>
          {row.description}
        </td>
      </tr>
    ))}
  </tbody>

</table>