@forge/react

11.8.3-next.0-experimental-0c74a4b11.9.0-next.1
out/hooks/useTheme.js
out/hooks/useTheme.js
+37
Index: package/out/hooks/useTheme.js
===================================================================
--- package/out/hooks/useTheme.js
+++ package/out/hooks/useTheme.js
@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTheme = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const bridge_1 = require("@forge/bridge");
+const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
+const useTheme = () => {
+    const [theme, setTheme] = (0, react_1.useState)(null);
+    const themeLoadedRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        void (async () => {
+            if (!themeLoadedRef.current) {
+                const context = await bridge_1.view.getContext();
+                if (context?.theme && !themeLoadedRef.current) {
+                    setTheme((currentTheme) => {
+                        return (0, isEqual_1.default)(currentTheme, context.theme) ? currentTheme : context.theme;
+                    });
+                    themeLoadedRef.current = true;
+                }
+            }
+        })();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const sub = bridge_1.events.on('FORGE_CORE_THEME_CHANGED', ({ theme: updatedTheme }) => {
+            themeLoadedRef.current = true;
+            setTheme((currentTheme) => {
+                return (0, isEqual_1.default)(currentTheme, updatedTheme) ? currentTheme : updatedTheme;
+            });
+        });
+        return () => {
+            void sub.then((subscription) => subscription.unsubscribe());
+        };
+    }, []);
+    return theme;
+};
+exports.useTheme = useTheme;