A React hook that helps detect whether media queries individually match.

npm i @utilityjs/use-media-query | yarn add @utilityjs/use-media-query

Usage

import * as React from "react";
import useMediaQuery from "@utilityjs/use-media-query";

const App: React.FC = () => {
  const [min, setMin] = React.useState(100);
  const [max, setMax] = React.useState(100);

  const matches = useMediaQuery([
    `(min-width: ${min}px)`,
    `(max-width: ${max}px)`
  ]);

  return (
    <div>
      {matches.join(", ")}
      <hr />
      min:{" "}
      <input
        type="number"
        defaultValue={min}
        placeholder="Set min"
        onChange={e => setMin(parseInt(e.target.value))}
      />
      <br />
      max:{" "}
      <input
        type="number"
        defaultValue={max}
        placeholder="Set max"
        onChange={e => setMax(parseInt(e.target.value))}
      />
      <br />
    </div>
  );
};

export default App;

API

useMediaQuery(query)

declare const useMediaQuery: (query: string | string[]) => boolean[];

query

A string or array of strings specifying the media query/queries to parse into MediaQueryList.