fix: Added docs for useTransformComponent and fixed the hook to updat…

…e on context change (#480)

Co-authored-by: Tyler <[email protected]>

src/hooks/use-transform-component.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useEffect, useState } from "react";
 
 import { useTransformContext } from "./use-transform-context";
 import { getState } from "utils";
@@ -9,8 +9,22 @@ export function useTransformComponent<T>(
 ): T {
   const libraryContext = useTransformContext();
 
-  return useMemo(
-    () => callback(getState(libraryContext)),
-    [libraryContext, callback],
+  const [transformRender, setTransformRender] = useState<T>(
+    callback(getState(libraryContext)),
   );
+
+  useEffect(() => {
+    let mounted = true;
+    const unmount = libraryContext.onChange((ref) => {
+      if (mounted) {
+        setTransformRender(callback(getState(ref.instance)));
+      }
+    });
+    return () => {
+      unmount();
+      mounted = false;
+    };
+  }, [callback, libraryContext]);
+
+  return transformRender;
 }

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

@@ -6,85 +6,88 @@ import { argsTypes } from "../../types/args.types.ts";
 import { normalizeArgs } from "../../utils";
 
 import exampleImg from "../../assets/small-image.jpg";
+import { useTransformComponent } from "../../../hooks";
 
-export const Template = (args) => (
-  <TransformWrapper {...normalizeArgs(args)}>
-    <TransformComponent
-      wrapperStyle={{ maxWidth: "100%", maxHeight: "calc(100vh - 50px)" }}
-    >
-      <div style={{ background: "#444", color: "white", padding: "50px" }}>
-        <h1>No scrollbars needed</h1>
-        <h2>Use mouse or gestures to move around</h2>
-        <button
-          onClick={() => alert("You can still interact with click events!")}
-        >
-          Click me!
-        </button>
-        <div
-          style={{
-            display: "flex",
-            overflow: "auto",
-            maxWidth: "100%",
-            padding: "10px",
-          }}
-        >
-          <div
-            style={{
-              width: "100px",
-              height: "100px",
-              padding: "10px",
-              background: "red",
-            }}
-            className="panningDisabled"
+export const Template = (args) => {
+  return (
+    <TransformWrapper {...normalizeArgs(args)}>
+      <TransformComponent
+        wrapperStyle={{ maxWidth: "100%", maxHeight: "calc(100vh - 50px)" }}
+      >
+        <div style={{ background: "#444", color: "white", padding: "50px" }}>
+          <h1>No scrollbars needed</h1>
+          <h2>Use mouse or gestures to move around</h2>
+          <button
+            onClick={() => alert("You can still interact with click events!")}
           >
-            Panning is DISABLED on this element
-          </div>
-          <div
-            style={{
-              width: "100px",
-              height: "100px",
-              padding: "10px",
-              background: "blue",
-            }}
-            className="wheelDisabled"
-          >
-            Wheel is DISABLED on this element
-          </div>
+            Click me!
+          </button>
           <div
             style={{
-              width: "100px",
-              height: "100px",
+              display: "flex",
+              overflow: "auto",
+              maxWidth: "100%",
               padding: "10px",
-              background: "green",
             }}
-            className="pinchDisabled"
           >
-            Pinch is DISABLED on this element
+            <div
+              style={{
+                width: "100px",
+                height: "100px",
+                padding: "10px",
+                background: "red",
+              }}
+              className="panningDisabled"
+            >
+              Panning is DISABLED on this element
+            </div>
+            <div
+              style={{
+                width: "100px",
+                height: "100px",
+                padding: "10px",
+                background: "blue",
+              }}
+              className="wheelDisabled"
+            >
+              Wheel is DISABLED on this element
+            </div>
+            <div
+              style={{
+                width: "100px",
+                height: "100px",
+                padding: "10px",
+                background: "green",
+              }}
+              className="pinchDisabled"
+            >
+              Pinch is DISABLED on this element
+            </div>
           </div>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum
+          </p>
+          <img src={exampleImg} alt="" />
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum
+          </p>
         </div>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum
-        </p>
-        <img src={exampleImg} alt="" />
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum
-        </p>
-      </div>
-    </TransformComponent>
-  </TransformWrapper>
-);
+      </TransformComponent>
+    </TransformWrapper>
+  );
+};
 
 <Meta
   title="Examples/Mixed Content"

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

@@ -2,9 +2,16 @@ import React from "react";
 
 import { TransformComponent, TransformWrapper } from "components";
 import { normalizeArgs } from "../../utils";
+import { useTransformComponent } from "../../../hooks";
 
 import styles from "../../utils/styles.module.css";
 
+const CurrentScale = () => {
+  return useTransformComponent(({ state }) => {
+    return <div>Current Scale: {state.scale}</div>;
+  });
+};
+
 export const Example: React.FC<any> = (args: any) => {
   return (
     <TransformWrapper {...normalizeArgs(args)}>
@@ -46,6 +53,7 @@ export const Example: React.FC<any> = (args: any) => {
               maxHeight: "calc(100vh - 50px)",
             }}
           >
+            <CurrentScale />
             <div
               style={{
                 background: "#444",

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

@@ -0,0 +1,27 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Hooks/useTransformComponent" />
+
+# useTransformComponent
+
+This hooks allows to easily connect with lifecycle into the Zoom-Pan-Pinch state
+for rendering a component. It will trigger the provided callback every time the
+transform state is changed.
+
+It will not affect rerendering so you can control the way you use received data.
+
+### Example
+
+```tsx
+const App = () => {
+  // It will trigger every time you interact with transform-component
+  // At the same time it will not cause rerendering so you can control it on your own
+  const transformedComponent = useTransformComponent(({ state, instance }) => {
+    console.log(state); // { previousScale: 1, scale: 1, positionX: 0, positionY: 0 }
+
+    return <div>Current scale: {state.scale}</div>;
+  });
+
+  return transformedComponent;
+};
+```

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

@@ -5,7 +5,7 @@ import { Meta } from "@storybook/addon-docs/blocks";
 # useTransformEffect
 
 This hooks allows to easily connect with lifecycle into the Zoom-Pan-Pinch
-state. It will trigger provided callback every time the transform state is
+state. It will trigger the provided callback every time the transform state is
 changed.
 
 It will not affect rerendering so you can control the way you use received data.