/reactuse

useMediaQuery

Returns whether a media query matches.

Usage

import { useMediaQuery } from "@siberiacancode/reactuse";

const matches = useMediaQuery("(max-width: 768px)");

Example

import { useMediaQuery } from "@siberiacancode/reactuse";

export const MobileOnly = () => {
  const isMobile = useMediaQuery("(max-width: 768px)");
  return isMobile ? <div>Mobile layout</div> : <div>Desktop layout</div>;
};

Notes

• Hook uses the matchMedia API.

Type Declarations

export declare const useMediaQuery: (query: string) => boolean;