react-use-media-query

1.0.3 • Public • Published

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.

Readme

Keywords

Package Sidebar

Install

npm i react-use-media-query

Weekly Downloads

0

Version

1.0.3

License

MIT

Unpacked Size

177 kB

Total Files

7

Last publish

Collaborators

  • c4rlosviteri