feat: add rerender hook

packages/docs/src/dom/InputSection.tsx

@@ -1,27 +1,38 @@
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useRef } from "react";
 import * as VFX from "react-vfx";
 import "./InputSection.css";
 
 const InputSection: React.FC = () => {
     const [text, setText] = useState("Try editing text!");
     const [debouncedText, setDebouncedText] = useState(text);
 
+    const divRef = useRef<HTMLDivElement>(null);
+
+    const rerender = VFX.useVfx();
+
+    const onChange = () => {
+        divRef.current && rerender(divRef.current);
+    };
+
     const update = useCallback(() => {
         setDebouncedText(text);
     }, [text]);
 
     return (
         <section className="InputSection">
-            <p style={{ fontSize: "48px", fontWeight: "bold" }}>
-                <VFX.VFXSpan shader="rainbow">{debouncedText}</VFX.VFXSpan>
-            </p>
-            <textarea
-                value={text}
-                onChange={(e) => setText(e.target.value)}
-            ></textarea>
-            <button type="button" onClick={update}>
-                <VFX.VFXSpan shader="rainbow">FIRE</VFX.VFXSpan>
-            </button>
+            <h2>VFXDiv</h2>
+            <VFX.VFXDiv shader="glitch" ref={divRef}>
+                <textarea onChange={onChange}>Hello</textarea>
+                <br />
+                <input type="text" defaultValue="Hello" onChange={onChange} />
+                <input
+                    type="range"
+                    min="0"
+                    max="100"
+                    defaultValue="0"
+                    onChange={onChange}
+                />
+            </VFX.VFXDiv>
         </section>
     );
 };

packages/react-vfx/src/element.tsx

@@ -7,20 +7,32 @@ type VFXElementProps<T extends keyof JSX.IntrinsicElements> =
     JSX.IntrinsicElements[T] & VFXProps;
 
 function VFXElementFactory<T extends keyof JSX.IntrinsicElements>(
-    type: T
-): React.FC<VFXElementProps<T>> {
-    const VFXElement: React.FC<VFXElementProps<T>> = (
-        props: VFXElementProps<T>
-    ) => {
+    type: T,
+): React.ForwardRefExoticComponent<
+    React.PropsWithoutRef<VFXElementProps<T>> & React.RefAttributes<HTMLElement>
+> {
+    return React.forwardRef(function VFXElement(
+        props: VFXElementProps<T>,
+        parentRef: React.ForwardedRef<HTMLElement>,
+    ) {
         const player = useContext(VFXContext);
-        const ref = useRef<HTMLElement>(null);
+
+        const elementRef = useRef<HTMLElement | undefined>();
+        const ref = (e: HTMLElement): void => {
+            elementRef.current = e;
+            if (parentRef instanceof Function) {
+                parentRef(e);
+            } else if (parentRef) {
+                parentRef.current = e;
+            }
+        };
 
         const { shader, release, uniforms, overflow, ...rawProps } = props;
 
         // Create scene
         useEffect(() => {
-            const element = ref.current;
-            if (element === null) {
+            const element = elementRef.current;
+            if (element === undefined) {
                 return;
             }
 
@@ -34,21 +46,19 @@ function VFXElementFactory<T extends keyof JSX.IntrinsicElements>(
             return () => {
                 player?.removeElement(element);
             };
-        }, [ref, player, shader, release, uniforms, overflow]);
+        }, [elementRef, player, shader, release, uniforms, overflow]);
 
         // Rerender if the content is updated
         useEffect(() => {
-            if (ref.current === null) {
+            if (elementRef.current === undefined) {
                 return;
             }
 
-            player?.updateTextElement(ref.current);
+            player?.updateTextElement(elementRef.current);
         }, [player, props.children]);
 
         return React.createElement(type, { ...rawProps, ref });
-    };
-
-    return VFXElement;
+    });
 }
 
 export default VFXElementFactory;

packages/react-vfx/src/hooks.ts

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { VFXContext } from "./context";
+
+export function useVfx(): (e: HTMLElement) => void {
+    const player = useContext(VFXContext);
+
+    return (e: HTMLElement) => player?.updateTextElement(e);
+}

packages/react-vfx/src/react-vfx.ts

@@ -6,3 +6,5 @@ import vElementFactory from "./element";
 export const VFXSpan = vElementFactory<"span">("span");
 export const VFXDiv = vElementFactory<"div">("div");
 export const VFXP = vElementFactory<"p">("p");
+
+export * from "./hooks";