@forge/react
11.8.3-next.0-experimental-0c74a4b11.9.0-next.1
out/hooks/useTheme.jsout/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;