Iterate

packages/element-web-module-api/src/api/profile.ts

@@ -12,6 +12,10 @@ import { Watchable } from "./watchable.ts";
  * @public
  */
 export interface Profile {
+    /**
+     * Indicates whether the user is a guest user.
+     */
+    isGuest?: boolean;
     /**
      * The user ID of the logged-in user, if undefined then no user is logged in.
      */

packages/element-web-module-api/src/api/watchable.ts

@@ -5,6 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
+import { useEffect, useState } from "react";
+
 type WatchFn<T> = (value: T) => void;
 
 function shallowCompare<T extends object>(obj1: T, obj2: T): boolean {
@@ -55,3 +57,21 @@ export class Watchable<T> {
         this.listeners.delete(listener);
     }
 }
+
+/**
+ * A React hook to use an updated Watchable value.
+ * @param watchable - The Watchable instance to watch.
+ * @returns The live value of the Watchable.
+ * @public
+ */
+export function useWatchable<T>(watchable: Watchable<T>): T {
+    const [value, setValue] = useState<T>(watchable.value);
+    useEffect(() => {
+        setValue(watchable.value);
+        watchable.watch(setValue);
+        return (): void => {
+            watchable.unwatch(setValue);
+        };
+    }, [watchable]);
+    return value;
+}