react-use-media-query

react-use-media-query

react-use-media-query is a React Hook that help you to render content conditionally based on a media query, by listening for matches to a CSS media query.

Instalation

Using npm:

npm i react-use-media-query

Using yarn:

yarn add react-use-media-query

Usage

import React from "react";
import useMediaQuery from "react-use-media-query";

const App = () => {
  const isMobile = useMediaQuery("(max-width: 480px)");

  return (
    <>
      {isMobile ? <p>mobile</p> : <p>desktop</p>}
    </>
  )
};

Params

useMediaQuery(query, defaultMatch)

query: can be a string, an object e.g. {minWidth: 100, maxWidth: 200}, {screen: true}, {minWidth: 100, maxWidth: '20em'} or an array of objects e.g. [{screen: true, minWidth: 100}, {handheld: true, orientation: 'landscape'}].

defaultMatch: is the default boolean returned value.