---
title: "useSupported – State Hook Usage & Examples"
description: "useSupported is a React hook for browser feature detection — runs a check after mount and returns a boolean, safely returning false during SSR."
canonical: https://reactuse.com/state/usesupported/
---

# useSupported

Check to see if your browser supports some feature

`useSupported` accepts a callback that performs a feature-detection check (e.g., `() => 'IntersectionObserver' in window`) and returns a boolean indicating whether the feature is available. The check runs after mount in a `useEffect` (or `useLayoutEffect` if the `sync` option is `true`), so it safely returns `false` during SSR and on the initial server render.

### When to Use

- Conditionally enabling browser features (e.g., EyeDropper API, Clipboard API, Web Bluetooth) based on runtime availability
- Showing fallback UI or informational messages when a required API is not supported
- Gating hook logic that depends on a specific browser capability to avoid runtime errors

### Notes

- **SSR-safe**: Always returns `false` on the server and during the initial render, then updates to the true value after mount.
- **Sync mode**: Pass `sync: true` to run the check in `useLayoutEffect` instead of `useEffect`, which can prevent a flash of incorrect UI.
- This hook is used internally by many other hooks in this library (e.g., `useEyeDropper`, `useClipboard`) to gate browser API access.

## Usage

```tsx live
function Demo() {
  const isSupported = useSupported(() => "EyeDropper" in window);
  return (
    <div>
      <p>
        window.EyeDropper is {isSupported ? "supported" : "unsupported"} in your
        browser
      </p>
    </div>
  );
};

```

%%API%%