@netless/fastboard 0.0.9 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "An open sourced sdk based on white-web-sdk.",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",

package/src/react.tsx

@@ -1,16 +1,42 @@
 import type { WhiteboardApp } from "./index";
 
-import React, { useEffect, useRef } from "react";
+import React, { forwardRef, useEffect, useRef } from "react";
 import { useLastValue } from "./internal/hooks";
 
+// https://itnext.io/reusing-the-ref-from-forwardref-with-react-hooks-4ce9df693dd
+function useCombinedRefs<T>(...refs: React.Ref<T>[]) {
+  const targetRef = useRef<T | null>(null);
+
+  useEffect(() => {
+    for (const ref of refs) {
+      if (!ref) continue;
+
+      if (typeof ref === "function") {
+        ref(targetRef.current);
+      } else {
+        (ref as typeof targetRef).current = targetRef.current;
+      }
+    }
+  }, [refs]);
+
+  return targetRef;
+}
+
 /**
  * @example
  * let app = await createWhiteboardApp(config)
  * <Fastboard app={app} />
  * await app.dispose()
  */
-export function Fastboard({ app }: { app?: WhiteboardApp | null }) {
-  const ref = useRef<HTMLDivElement>(null);
+export const Fastboard = forwardRef<
+  HTMLDivElement,
+  { app?: WhiteboardApp | null } & React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  >
+>(({ app, ...restProps }, outerRef) => {
+  const innerRef = useRef<HTMLDivElement>(null);
+  const ref = useCombinedRefs(outerRef, innerRef);
   const previous = useLastValue(app);
 
   useEffect(() => {
@@ -20,7 +46,7 @@ export function Fastboard({ app }: { app?: WhiteboardApp | null }) {
     if (app) {
       app.bindElement(ref.current);
     }
-  }, [app, previous]);
+  }, [app, previous, ref]);
 
-  return <div className="fastboard" ref={ref} />;
-}
+  return <div className="fastboard" {...restProps} ref={ref} />;
+});