useSupported

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.

Usage

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

const isMatchMediaSupported = useSupported(() => "matchMedia" in window);

// Use the observable value
if (isMatchMediaSupported.get()) {
  // matchMedia is available
}

With Legend-State reactive bindings

import { useSupported } from '@usels/web'

const isIntersectionObserverSupported = useSupported(
  () => 'IntersectionObserver' in window
)

function MyComponent() {
  return (
    isIntersectionObserverSupported.get()
      ? <FeatureComponent />
      : <Fallback />
  )
}

Type Declarations

export type UseSupportedReturn = Observable<boolean>;
export declare function useSupported(callback: () => unknown): UseSupportedReturn;

Source

View on GitHub

Contributors

• tigerwest

Changelog

• a7392ab 2026-03-06 - feat(core,browser): add sync strategy hooks (tigerwest)