Utilities

useWhenMounted

Execute a callback and expose its return value as a reactive Observable<T | undefined> — only after the component has mounted. Returns undefined during SSR and before hydration, then re-evaluates with the actual callback value once mounted.

Execute a callback and expose its return value as a reactive Observable<T | undefined> — only after the component has mounted. Returns undefined during SSR and before hydration, then re-evaluates with the actual callback value once mounted.

Unlike useSupported, the return value is not coerced to boolean — the full type T is preserved.

Demo

import { 
import useWhenMounted
useWhenMounted } from "@usels/web";

function 
function Component(): void
Component() {
  const 
const windowWidth$: any
windowWidth$ = 
import useWhenMounted
useWhenMounted(() => 
any
window.
any
innerWidth);
  // undefined on SSR, actual width after mount
}

import { createWhenMounted } from "@usels/web";

function Component() {
  "use scope"
  const windowWidth$ = createWhenMounted(() => window.innerWidth);
}

Deferred browser API access

Hook
Scope

import { useWhenMounted } from "@usels/web";

function Component() {
  const scrollY$ = useWhenMounted(() => window.scrollY);
  const userAgent$ = useWhenMounted(() => navigator.userAgent);
}

import { createWhenMounted } from "@usels/web";

function Component() {
  "use scope"
  const scrollY$ = createWhenMounted(() => window.scrollY);
  const userAgent$ = createWhenMounted(() => navigator.userAgent);
}

Source

View on GitHub