useSupported

SSR-safe browser feature detection as a reactive Observable

Check whether a browser API or feature is supported, returning a reactive Observable<boolean> that re-evaluates after the component mounts. Safe to use during SSR — the value is always false on the server and updates on the client after hydration.

Demo

Usage

Hook

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

function Component() {
  const isMatchMediaSupported$ = useSupported(() => "matchMedia" in window);
  // false on SSR, true after mount if supported
}

Scope

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

function Component() {
  "use scope"
  const isMatchMediaSupported$ = createSupported(() => "matchMedia" in window);
}

Conditional rendering

Hook

import { Show, useSupported } from "@usels/web";

function Component() {
  const isIntersectionObserverSupported$ = useSupported(
    () => "IntersectionObserver" in window
  );

  return (
    <Show
      if={isIntersectionObserverSupported$}
      else={<Fallback />}
    >
      <FeatureComponent />
    </Show>
  );
}

Scope

import { createSupported, Show } from "@usels/web";

function Component() {
  "use scope"
  const isIntersectionObserverSupported$ = createSupported(
    () => "IntersectionObserver" in window
  );

  return (
    <Show
      if={isIntersectionObserverSupported$}
      else={<Fallback />}
    >
      <FeatureComponent />
    </Show>
  );
}

Type

Parameters

Parameter	Type	Description
callback	() => unknown	-

Returns

ObservableBoolean<boolean>

Name	Type	Description
toggle	() => void	-
peek	{ (): boolean; (): boolean; }	-
get	(trackingType?: TrackingType | GetOptions) => boolean	-
onChange	(cb: ListenerFn<boolean>, options?: { trackingType?: TrackingType; initial?: boolean | undefined; immediate?: boolean | undefined; noArgs?: boolean | undefined; } | undefined) => () => void	-
set	{ (value: (prev: boolean) => boolean): void; (value: ObservableBoolean<boolean>): void; (value: boolean | ImmutableObservableBase<boolean> | ... 4 more ... | (() => boolean | ... 1 more ... | Promise<...>)): void; (value: Promise<...>): void; (value: boolean): void; }	-
delete	() => void	-

Source

View on GitHub