Skip to content

Commit f2a7d20

Browse files
prc5prc5
committed
docs(stories): refresh Storybook docs and example structure
Rewrite the introduction and MDX docs with clearer copy, modern TSX snippets, and updated links. Consolidate the separate image size stories into one image example, add a padding example, and align hooks and example components with the new structure. Restyle the story Code helper for inline snippets and declare .jpeg/.png modules for typed image imports in examples. Made-with: Cursor
1 parent 114c02c commit f2a7d20

36 files changed

Lines changed: 2001 additions & 985 deletions

‎src/stories/docs/Introduction.stories.mdx‎

Lines changed: 60 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Meta } from "@storybook/blocks";
22

33
<Meta title="Docs/Introduction" />
44

5-
# 🖼 React Zoom Pan Pinch
5+
# React Zoom Pan Pinch
66

77
<p>
88
<a href="https://bettertyped.com/">
@@ -17,9 +17,6 @@ import { Meta } from "@storybook/blocks";
1717
<a href="https://github.com/prc5/react-zoom-pan-pinch/blob/main/License.md">
1818
<img src="https://custom-icon-badges.demolab.com/github/license/prc5/react-zoom-pan-pinch?logo=law&color=yellow" />
1919
</a>
20-
<a href="https://github.com/semantic-release/semantic-release">
21-
<img src="https://custom-icon-badges.demolab.com/badge/semver-commitzen-e10079?logo=semantic-release&color=e76f51" />
22-
</a>
2320
<a href="https://www.npmjs.com/package/react-zoom-pan-pinch">
2421
<img src="https://custom-icon-badges.demolab.com/npm/dm/react-zoom-pan-pinch?logoColor=fff&logo=trending-up" />
2522
</a>
@@ -29,140 +26,104 @@ import { Meta } from "@storybook/blocks";
2926
<a href="https://github.com/prc5/react-zoom-pan-pinch">
3027
<img src="https://custom-icon-badges.demolab.com/badge/typescript-%23007ACC.svg?logo=typescript&logoColor=white" />
3128
</a>
32-
<a href="https://hits.sh/github.com/prc5/react-zoom-pan-pinch/">
33-
<img src="https://hits.sh/github.com/prc5/react-zoom-pan-pinch.svg?color=64BC4B&logo=bookmeter" />
34-
</a>
35-
<a href="https://twitter.com/maciej_pyrc">
36-
<img
37-
alt="Twitter Follow"
38-
src="https://img.shields.io/twitter/follow/maciej_pyrc?label=Follow%20&style=social"
39-
/>
40-
</a>
4129
</p>
4230

43-
> Super fast and light react npm package for zooming, panning and pinching html
44-
> elements in easy way
45-
46-
- [Demo](https://prc5.github.io/react-zoom-pan-pinch/?path=/story/examples-big-image--big-image)
47-
- [Docs](https://prc5.github.io/react-zoom-pan-pinch/?path=/story/docs-props--page)
31+
> Super fast and light React library for zooming, panning, and pinching HTML
32+
> elements with ease.
4833
4934
## Key Features
5035

51-
- 🚀 Fast and easy to use
52-
- 🏭 Light, without external dependencies
53-
- 💎 Mobile gestures, touchpad gestures and desktop mouse events support
54-
- 🎁 Powerful context usage, which gives you a lot of freedom
55-
- 🔧 Highly customizable
56-
- 👑 Animations and Utils to create own tools
57-
- 🔮 Advanced hooks and components
58-
59-
## Help me keep working on this project ❤️
60-
61-
- [Become a Sponsor on GitHub](https://github.com/sponsors/prc5)
62-
63-
---
36+
- **Fast and lightweight** — no external dependencies
37+
- **Touch, trackpad, and mouse** — full gesture support across devices
38+
- **Render props and hooks** — flexible API for any component architecture
39+
- **Highly customizable** — animations, bounds, velocity, padding, and more
40+
- **Advanced components** — `KeepScale`, `MiniMap`, and programmatic controls
6441

6542
## Installation
6643

6744
```bash
68-
npm install --save react-zoom-pan-pinch
45+
npm install react-zoom-pan-pinch
46+
```
47+
6948
or
49+
50+
```bash
7051
yarn add react-zoom-pan-pinch
7152
```
7253

73-
## Examples
54+
## Quick Start
7455

75-
```jsx
76-
import React, { Component } from "react";
56+
The simplest setup — wrap any content with `TransformWrapper` and
57+
`TransformComponent`:
7758

59+
```tsx
7860
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
7961

80-
const Example = () => {
81-
return (
82-
<TransformWrapper>
83-
<TransformComponent>
84-
<img src="image.jpg" alt="test" />
85-
</TransformComponent>
86-
</TransformWrapper>
87-
);
88-
};
62+
const App = () => (
63+
<TransformWrapper>
64+
<TransformComponent>
65+
<img src="image.jpg" alt="Zoomable" />
66+
</TransformComponent>
67+
</TransformWrapper>
68+
);
8969
```
9070

91-
or
71+
## With Controls (Render Props)
9272

93-
```jsx
94-
import React, { Component } from "react";
73+
Access zoom/pan handlers through render props:
9574

75+
```tsx
9676
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
9777

98-
const Example = () => {
99-
return (
100-
<TransformWrapper
101-
initialScale={1}
102-
initialPositionX={200}
103-
initialPositionY={100}
104-
>
105-
{({ zoomIn, zoomOut, resetTransform, ...rest }) => (
106-
<React.Fragment>
107-
<div className="tools">
108-
<button onClick={() => zoomIn()}>+</button>
109-
<button onClick={() => zoomOut()}>-</button>
110-
<button onClick={() => resetTransform()}>x</button>
111-
</div>
112-
<TransformComponent>
113-
<img src="image.jpg" alt="test" />
114-
<div>Example text</div>
115-
</TransformComponent>
116-
</React.Fragment>
117-
)}
118-
</TransformWrapper>
119-
);
120-
};
78+
const App = () => (
79+
<TransformWrapper initialScale={1} initialPositionX={200} initialPositionY={100}>
80+
{({ zoomIn, zoomOut, resetTransform }) => (
81+
<>
82+
<div className="tools">
83+
<button onClick={() => zoomIn()}>+</button>
84+
<button onClick={() => zoomOut()}>-</button>
85+
<button onClick={() => resetTransform()}>x</button>
86+
</div>
87+
<TransformComponent>
88+
<img src="image.jpg" alt="Zoomable" />
89+
</TransformComponent>
90+
</>
91+
)}
92+
</TransformWrapper>
93+
);
12194
```
12295

123-
or
96+
## With Ref and zoomToElement
97+
98+
Use a ref for imperative access outside of render props:
12499

125100
```tsx
126-
import React, { useRef } from "react";
101+
import { useRef } from "react";
127102
import {
128103
TransformWrapper,
129104
TransformComponent,
130105
ReactZoomPanPinchRef,
131106
} from "react-zoom-pan-pinch";
132107

133-
const Controls = ({ zoomIn, zoomOut, resetTransform }) => (
134-
<>
135-
<button onClick={() => zoomIn()}>+</button>
136-
<button onClick={() => zoomOut()}>-</button>
137-
<button onClick={() => resetTransform()}>x</button>
138-
</>
139-
);
140-
141-
const Component = () => {
142-
const transformComponentRef = useRef<ReactZoomPanPinchRef | null>(null);
108+
const App = () => {
109+
const ref = useRef<ReactZoomPanPinchRef | null>(null);
143110

144-
const zoomToImage = () => {
145-
if (transformComponentRef.current) {
146-
const { zoomToElement } = transformComponentRef.current;
147-
zoomToElement("imgExample");
148-
}
111+
const focusImage = () => {
112+
ref.current?.zoomToElement("imgExample");
149113
};
150114

151115
return (
152-
<TransformWrapper
153-
initialScale={1}
154-
initialPositionX={200}
155-
initialPositionY={100}
156-
ref={transformComponentRef}
157-
>
158-
{(utils) => (
159-
<React.Fragment>
160-
<Controls {...utils} />
116+
<TransformWrapper ref={ref}>
117+
{({ zoomIn, zoomOut, resetTransform }) => (
118+
<>
119+
<button onClick={() => zoomIn()}>+</button>
120+
<button onClick={() => zoomOut()}>-</button>
121+
<button onClick={() => resetTransform()}>x</button>
161122
<TransformComponent>
162-
<img src="image.jpg" alt="test" id="imgExample" />
163-
<div onClick={zoomToImage}>Example text</div>
123+
<img src="image.jpg" alt="Zoomable" id="imgExample" />
124+
<div onClick={focusImage}>Focus image</div>
164125
</TransformComponent>
165-
</React.Fragment>
126+
</>
166127
)}
167128
</TransformWrapper>
168129
);

‎src/stories/docs/handlers.stories.mdx‎

Lines changed: 73 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,83 @@
11
import { Meta } from "@storybook/blocks";
22

33
import { getHandlersTable } from "./handlers.tsx";
4-
import { Code } from "../utils";
54

65
<Meta title="Docs/Handlers" />
76

87
# Handlers
98

10-
List of additionaly added handlers - you can acces them via ref or render props
11-
12-
<table className="handlers-table">
13-
<thead>
14-
<tr>
15-
<th>
16-
Name
17-
</th>
18-
<th>
19-
Type
20-
</th>
21-
<th>
22-
Default
23-
</th>
24-
<th>
25-
Description
26-
</th>
27-
</tr>
28-
</thead>
29-
<tbody>
30-
{getHandlersTable().map(row => (
31-
<tr className={row.isObjectRow ? "is-object-row" : ""}>
32-
<td>
9+
Methods available via **render props**, **ref**, or the **`useControls`** hook.
10+
Each handler triggers an animated transition on the transform state.
11+
12+
<div style={{ maxWidth: 760, fontFamily: "system-ui, -apple-system, sans-serif" }}>
13+
{getHandlersTable().map((row, i) => (
14+
<div
15+
key={i}
16+
style={{
17+
padding: "18px 20px",
18+
marginBottom: 12,
19+
borderRadius: 12,
20+
background: "rgba(255,255,255,0.02)",
21+
border: "1px solid rgba(255,255,255,0.06)",
22+
}}
23+
>
24+
<div style={{ marginBottom: 10 }}>
25+
<span style={{ fontFamily: "'SF Mono', 'Fira Code', monospace", fontSize: 14, fontWeight: 700, color: "#667eea" }}>
3326
{row.name}
34-
</td>
35-
<td>
36-
{row.type.map(type => (<Code code={type} />))}
37-
</td>
38-
<td>
39-
{row.parameters.map(param => (<Code code={param} />))}
40-
</td>
41-
<td>
42-
{row.description}
43-
</td>
44-
</tr>
45-
))}
46-
</tbody>
27+
</span>
28+
</div>
29+
30+
<div
31+
style={{
32+
padding: "10px 14px",
33+
borderRadius: 8,
34+
background: "rgba(30, 30, 50, 0.6)",
35+
border: "1px solid rgba(255,255,255,0.06)",
36+
marginBottom: 10,
37+
fontFamily: "'SF Mono', 'Fira Code', monospace",
38+
fontSize: 12,
39+
color: "#e2e8f0",
40+
lineHeight: 1.6,
41+
overflowX: "auto",
42+
}}
43+
>
44+
{row.type.map((t, j) => (
45+
<div key={j}>{t}</div>
46+
))}
47+
</div>
4748

48-
</table>
49+
{row.parameters && row.parameters.length > 0 && (
50+
<div style={{ marginBottom: 10 }}>
51+
<div style={{ fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6 }}>
52+
Parameters
53+
</div>
54+
<div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
55+
{row.parameters.map((param, j) => (
56+
<code
57+
key={j}
58+
style={{
59+
display: "inline-block",
60+
padding: "2px 8px",
61+
borderRadius: 4,
62+
background: "rgba(30, 30, 50, 0.5)",
63+
border: "1px solid rgba(255,255,255,0.06)",
64+
fontSize: 11,
65+
color: "#93c5fd",
66+
fontFamily: "'SF Mono', 'Fira Code', monospace",
67+
}}
68+
>
69+
{param}
70+
</code>
71+
))}
72+
</div>
73+
</div>
74+
)}
75+
76+
{row.description && (
77+
<p style={{ margin: 0, fontSize: 12, lineHeight: 1.6, color: "rgba(255,255,255,0.5)" }}>
78+
{row.description}
79+
</p>
80+
)}
81+
</div>
82+
))}
83+
</div>

0 commit comments

Comments
 (0)