Skip to content

Commit 43b0b1e

Browse files
prc5prc5
committed
style: 💄 Readme update
1 parent acecc35 commit 43b0b1e

1 file changed

Lines changed: 88 additions & 56 deletions

File tree

‎README.md‎

Lines changed: 88 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,27 @@
3636
</a>
3737
</p>
3838

39-
Do you like this library? Try out other projects
40-
**[⚡Hyper Fetch](https://github.com/BetterTyped/hyper-fetch)**
41-
4239
#### Sources
4340

4441
- [Demo](https://BetterTyped.github.io/react-zoom-pan-pinch/?path=/story/examples-big-image--big-image)
4542
- [Docs](https://BetterTyped.github.io/react-zoom-pan-pinch/?path=/story/docs-props--page)
4643

44+
<p align="center">
45+
<a href="https://github.com/sponsors/prc5?tier=platinum">
46+
<picture>
47+
<img width="830" src="https://raw.githubusercontent.com/prc5/sponsors/main/assets/Platinum.png" alt="Premium sponsor banner"/>
48+
</picture>
49+
</a>
50+
</p>
51+
52+
<p align="center">
53+
<a href="https://github.com/sponsors/prc5?tier=Platinum">
54+
<picture>
55+
<img width="830" src="https://raw.githubusercontent.com/prc5/sponsors/main/packages/platinum/sponsorkit/sponsors.svg" alt="Premium sponsor banner"/>
56+
</picture>
57+
</a>
58+
</p>
59+
4760
## Key Features
4861

4962
- 🚀 Fast and easy to use
@@ -58,6 +71,22 @@ Do you like this library? Try out other projects
5871

5972
- [Become a Sponsor on GitHub](https://github.com/sponsors/prc5)
6073

74+
<p align="center">
75+
<a href="https://github.com/sponsors/prc5?tier=Gold">
76+
<picture>
77+
<img width="830" src="https://raw.githubusercontent.com/prc5/sponsors/main/assets/Gold.png" alt="Premium sponsor banner"/>
78+
</picture>
79+
</a>
80+
</p>
81+
82+
<p align="center">
83+
<a href="https://github.com/sponsors/prc5?tier=gold">
84+
<picture>
85+
<img width="830" src="https://raw.githubusercontent.com/prc5/sponsors/main/packages/gold/sponsorkit/sponsors.svg" alt="Premium sponsor banner"/>
86+
</picture>
87+
</a>
88+
</p>
89+
6190
---
6291

6392
## Installation
@@ -91,7 +120,23 @@ or
91120
```jsx
92121
import React, { Component } from "react";
93122

94-
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
123+
import {
124+
TransformWrapper,
125+
TransformComponent,
126+
useControls,
127+
} from "react-zoom-pan-pinch";
128+
129+
const Controls = () => {
130+
const { zoomIn, zoomOut, resetTransform } = useControls();
131+
132+
return (
133+
<div className="tools">
134+
<button onClick={() => zoomIn()}>+</button>
135+
<button onClick={() => zoomOut()}>-</button>
136+
<button onClick={() => resetTransform()}>x</button>
137+
</div>
138+
);
139+
};
95140

96141
const Example = () => {
97142
return (
@@ -101,72 +146,59 @@ const Example = () => {
101146
initialPositionY={100}
102147
>
103148
{({ zoomIn, zoomOut, resetTransform, ...rest }) => (
104-
<React.Fragment>
105-
<div className="tools">
106-
<button onClick={() => zoomIn()}>+</button>
107-
<button onClick={() => zoomOut()}>-</button>
108-
<button onClick={() => resetTransform()}>x</button>
109-
</div>
149+
<>
150+
<Controls />
110151
<TransformComponent>
111152
<img src="image.jpg" alt="test" />
112153
<div>Example text</div>
113154
</TransformComponent>
114-
</React.Fragment>
155+
</>
115156
)}
116157
</TransformWrapper>
117158
);
118159
};
119160
```
120161

121-
or
162+
<p align="center">
163+
<a href="https://github.com/sponsors/prc5?tier=Silver">
164+
<picture>
165+
<img width="830" src="https://raw.githubusercontent.com/prc5/sponsors/main/assets/Silver.png" alt="Premium sponsor banner" />
166+
</picture>
167+
</a>
168+
</p>
122169

123-
```tsx
124-
import React, { useRef } from "react";
125-
import {
126-
TransformWrapper,
127-
TransformComponent,
128-
ReactZoomPanPinchRef,
129-
} from "react-zoom-pan-pinch";
170+
<p align="center">
171+
<a href="https://github.com/sponsors/prc5?tier=Silver">
172+
<picture>
173+
<img width="830" src="https://raw.githubusercontent.com/prc5/sponsors/main/packages/silver/sponsorkit/sponsors.svg" alt="Premium sponsor banner" />
174+
</picture>
175+
</a>
176+
</p>
130177

131-
const Controls = ({ zoomIn, zoomOut, resetTransform }) => (
132-
<>
133-
<button onClick={() => zoomIn()}>+</button>
134-
<button onClick={() => zoomOut()}>-</button>
135-
<button onClick={() => resetTransform()}>x</button>
136-
</>
137-
);
178+
<p align="center">
179+
<a href="https://github.com/sponsors/prc5">
180+
<img src="https://github.com/prc5/sponsors/blob/main/sponsorkit/sponsors.png?raw=true" alt="My Sponsors" />
181+
</a>
182+
</p>
138183

139-
const Component = () => {
140-
const transformComponentRef = useRef<ReactZoomPanPinchRef | null>(null);
184+
## License
141185

142-
const zoomToImage = () => {
143-
if (transformComponentRef.current) {
144-
const { zoomToElement } = transformComponentRef.current;
145-
zoomToElement("imgExample");
146-
}
147-
};
186+
MIT © [prc5](https://github.com/prc5)
148187

149-
return (
150-
<TransformWrapper
151-
initialScale={1}
152-
initialPositionX={200}
153-
initialPositionY={100}
154-
ref={transformComponentRef}
155-
>
156-
{(utils) => (
157-
<React.Fragment>
158-
<Controls {...utils} />
159-
<TransformComponent>
160-
<img src="image.jpg" alt="test" id="imgExample" />
161-
<div onClick={zoomToImage}>Example text</div>
162-
</TransformComponent>
163-
</React.Fragment>
164-
)}
165-
</TransformWrapper>
166-
);
167-
};
168-
```
188+
## Try other BetterTyped projects
169189

170-
## License
190+
Do you like this library? Try out other projects
191+
**[⚡Hyper Fetch](https://github.com/BetterTyped/hyper-fetch)** - Fetching and
192+
realtime data exchange framework.
171193

172-
MIT © [prc5](https://github.com/prc5)
194+
<a href="https://github.com/BetterTyped/hyper-fetch">
195+
<img width="500px" src="https://raw.githubusercontent.com/BetterTyped/hyper-fetch/main/.github/assets/readme.png" alt="Hyper Fetch" />
196+
</a>
197+
198+
## 💖 Our sponsors
199+
200+
<p align="center">
201+
<a href="https://github.com/sponsors/prc5">
202+
<img src="https://raw.githubusercontent.com/prc5/sponsors/main/packages/other/sponsorkit/sponsors.svg?raw=true" alt="My Sponsors" />
203+
</a>
204+
</p>

0 commit comments

Comments
 (0)