Function useMediaQuery

A React hook that listens to media query changes.

This hook evaluates the provided CSS media query and returns a boolean indicating whether the query currently matches the viewport size. It listens for changes to update the value automatically.

Example

import { useMediaQuery } from "essential-hooks-collection";

const MyComponent = () => {
  const isSmallScreen = useMediaQuery("(max-width: 768px)");

  return (
    <div>
      {isSmallScreen ? <p>Small screen</p> : <p>Large screen</p>}
    </div>
  );
};

export default MyComponent;
  • useMediaQuery(query: string): boolean

    Parameters

    • query: string

      The CSS media query string (e.g., "(max-width: 768px)").

    Returns boolean

    Returns true if the media query matches, otherwise false.

Settings

Member Visibility