werkbank
    Preparing search index...

    Function useMatchMedia

    • Tracks the state of a media query.

      Parameters

      • mediaQuery: string

        The media query string to match (e.g., "(min-width: 768px)").

      Returns boolean

      true if the media query matches, false otherwise.

      This hook uses window.matchMedia to listen for changes to the specified media query. It uses useSyncExternalStore to ensure concurrent rendering compatibility.

      const isDesktop = useMatchMedia("(min-width: 1024px)");
      return <div>{isDesktop ? "Desktop" : "Mobile"}</div>;