Function useSafeMediaQuery

  • useSafeMediaQuery(
        query: string | (theme: any) => string,
        options?: {
            defaultMatches?: boolean;
            matchMedia?: (query: string) => MediaQueryList & (
                query: string,
            ) => MediaQueryList;
            noSsr?: boolean;
            ssrMatchMedia?: (query: string) => { matches: boolean };
        },
    ): boolean

    A safe version of useMediaQuery that works reliably in production builds and handles SSR/hydration issues properly.

    Parameters

    • query: string | (theme: any) => string

      Media query string or function that takes theme and returns query string

    • Optionaloptions: {
          defaultMatches?: boolean;
          matchMedia?: (query: string) => MediaQueryList & (
              query: string,
          ) => MediaQueryList;
          noSsr?: boolean;
          ssrMatchMedia?: (query: string) => { matches: boolean };
      }

      Options for the media query

    Returns boolean

    boolean indicating if the media query matches

Settings

Member Visibility