Skip to content

Commit 16e1466

Browse files
tylersayshitylersayshi
authored
fix: Added docs for useTransformComponent and fixed the hook to update on context change (#480)
Co-authored-by: Tyler <26290074+thegitduck@users.noreply.github.com>
1 parent 9724b18 commit 16e1466

File tree

5 files changed

+127
-75
lines changed

5 files changed

+127
-75
lines changed

‎src/hooks/use-transform-component.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useMemo } from "react";
1+
import { useEffect, useState } from "react";
22

33
import { useTransformContext } from "./use-transform-context";
44
import { getState } from "utils";
@@ -9,8 +9,22 @@ export function useTransformComponent<T>(
99
): T {
1010
const libraryContext = useTransformContext();
1111

12-
return useMemo(
13-
() => callback(getState(libraryContext)),
14-
[libraryContext, callback],
12+
const [transformRender, setTransformRender] = useState<T>(
13+
callback(getState(libraryContext)),
1514
);
15+
16+
useEffect(() => {
17+
let mounted = true;
18+
const unmount = libraryContext.onChange((ref) => {
19+
if (mounted) {
20+
setTransformRender(callback(getState(ref.instance)));
21+
}
22+
});
23+
return () => {
24+
unmount();
25+
mounted = false;
26+
};
27+
}, [callback, libraryContext]);
28+
29+
return transformRender;
1630
}

‎src/stories/examples/content/content.stories.mdx‎

Lines changed: 73 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -6,85 +6,88 @@ import { argsTypes } from "../../types/args.types.ts";
66
import { normalizeArgs } from "../../utils";
77

88
import exampleImg from "../../assets/small-image.jpg";
9+
import { useTransformComponent } from "../../../hooks";
910

10-
export const Template = (args) => (
11-
<TransformWrapper {...normalizeArgs(args)}>
12-
<TransformComponent
13-
wrapperStyle={{ maxWidth: "100%", maxHeight: "calc(100vh - 50px)" }}
14-
>
15-
<div style={{ background: "#444", color: "white", padding: "50px" }}>
16-
<h1>No scrollbars needed</h1>
17-
<h2>Use mouse or gestures to move around</h2>
18-
<button
19-
onClick={() => alert("You can still interact with click events!")}
20-
>
21-
Click me!
22-
</button>
23-
<div
24-
style={{
25-
display: "flex",
26-
overflow: "auto",
27-
maxWidth: "100%",
28-
padding: "10px",
29-
}}
30-
>
31-
<div
32-
style={{
33-
width: "100px",
34-
height: "100px",
35-
padding: "10px",
36-
background: "red",
37-
}}
38-
className="panningDisabled"
11+
export const Template = (args) => {
12+
return (
13+
<TransformWrapper {...normalizeArgs(args)}>
14+
<TransformComponent
15+
wrapperStyle={{ maxWidth: "100%", maxHeight: "calc(100vh - 50px)" }}
16+
>
17+
<div style={{ background: "#444", color: "white", padding: "50px" }}>
18+
<h1>No scrollbars needed</h1>
19+
<h2>Use mouse or gestures to move around</h2>
20+
<button
21+
onClick={() => alert("You can still interact with click events!")}
3922
>
40-
Panning is DISABLED on this element
41-
</div>
42-
<div
43-
style={{
44-
width: "100px",
45-
height: "100px",
46-
padding: "10px",
47-
background: "blue",
48-
}}
49-
className="wheelDisabled"
50-
>
51-
Wheel is DISABLED on this element
52-
</div>
23+
Click me!
24+
</button>
5325
<div
5426
style={{
55-
width: "100px",
56-
height: "100px",
27+
display: "flex",
28+
overflow: "auto",
29+
maxWidth: "100%",
5730
padding: "10px",
58-
background: "green",
5931
}}
60-
className="pinchDisabled"
6132
>
62-
Pinch is DISABLED on this element
33+
<div
34+
style={{
35+
width: "100px",
36+
height: "100px",
37+
padding: "10px",
38+
background: "red",
39+
}}
40+
className="panningDisabled"
41+
>
42+
Panning is DISABLED on this element
43+
</div>
44+
<div
45+
style={{
46+
width: "100px",
47+
height: "100px",
48+
padding: "10px",
49+
background: "blue",
50+
}}
51+
className="wheelDisabled"
52+
>
53+
Wheel is DISABLED on this element
54+
</div>
55+
<div
56+
style={{
57+
width: "100px",
58+
height: "100px",
59+
padding: "10px",
60+
background: "green",
61+
}}
62+
className="pinchDisabled"
63+
>
64+
Pinch is DISABLED on this element
65+
</div>
6366
</div>
67+
<p>
68+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
69+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
70+
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
71+
aliquip ex ea commodo consequat. Duis aute irure dolor in
72+
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
73+
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
74+
culpa qui officia deserunt mollit anim id est laborum
75+
</p>
76+
<img src={exampleImg} alt="" />
77+
<p>
78+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
79+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
80+
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
81+
aliquip ex ea commodo consequat. Duis aute irure dolor in
82+
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
83+
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
84+
culpa qui officia deserunt mollit anim id est laborum
85+
</p>
6486
</div>
65-
<p>
66-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
67-
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
68-
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
69-
aliquip ex ea commodo consequat. Duis aute irure dolor in
70-
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
71-
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
72-
culpa qui officia deserunt mollit anim id est laborum
73-
</p>
74-
<img src={exampleImg} alt="" />
75-
<p>
76-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
77-
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
78-
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
79-
aliquip ex ea commodo consequat. Duis aute irure dolor in
80-
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
81-
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
82-
culpa qui officia deserunt mollit anim id est laborum
83-
</p>
84-
</div>
85-
</TransformComponent>
86-
</TransformWrapper>
87-
);
87+
</TransformComponent>
88+
</TransformWrapper>
89+
);
90+
};
8891

8992
<Meta
9093
title="Examples/Mixed Content"

‎src/stories/examples/zoom-to-element/example.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,16 @@ import React from "react";
22

33
import { TransformComponent, TransformWrapper } from "components";
44
import { normalizeArgs } from "../../utils";
5+
import { useTransformComponent } from "../../../hooks";
56

67
import styles from "../../utils/styles.module.css";
78

9+
const CurrentScale = () => {
10+
return useTransformComponent(({ state }) => {
11+
return <div>Current Scale: {state.scale}</div>;
12+
});
13+
};
14+
815
export const Example: React.FC<any> = (args: any) => {
916
return (
1017
<TransformWrapper {...normalizeArgs(args)}>
@@ -46,6 +53,7 @@ export const Example: React.FC<any> = (args: any) => {
4653
maxHeight: "calc(100vh - 50px)",
4754
}}
4855
>
56+
<CurrentScale />
4957
<div
5058
style={{
5159
background: "#444",

‎src/stories/hooks/use-transform-component.stories.mdx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Meta } from "@storybook/addon-docs/blocks";
2+
3+
<Meta title="Hooks/useTransformComponent" />
4+
5+
# useTransformComponent
6+
7+
This hooks allows to easily connect with lifecycle into the Zoom-Pan-Pinch state
8+
for rendering a component. It will trigger the provided callback every time the
9+
transform state is changed.
10+
11+
It will not affect rerendering so you can control the way you use received data.
12+
13+
### Example
14+
15+
```tsx
16+
const App = () => {
17+
// It will trigger every time you interact with transform-component
18+
// At the same time it will not cause rerendering so you can control it on your own
19+
const transformedComponent = useTransformComponent(({ state, instance }) => {
20+
console.log(state); // { previousScale: 1, scale: 1, positionX: 0, positionY: 0 }
21+
22+
return <div>Current scale: {state.scale}</div>;
23+
});
24+
25+
return transformedComponent;
26+
};
27+
```

‎src/stories/hooks/use-transform-effect.stories.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Meta } from "@storybook/addon-docs/blocks";
55
# useTransformEffect
66

77
This hooks allows to easily connect with lifecycle into the Zoom-Pan-Pinch
8-
state. It will trigger provided callback every time the transform state is
8+
state. It will trigger the provided callback every time the transform state is
99
changed.
1010

1111
It will not affect rerendering so you can control the way you use received data.

0 commit comments

Comments
 (0)