Nanobots Protecting Microbots
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-simple-matchmedia

3.0.2 • Public • Published

react-simple-matchmedia

React hook used for matching media queries. (It doesn't render in DOM if media query is not matched) It uses browser's window.matchMedia.

install size

Install

$ yarn add react-simple-matchmedia

or

$ npm i react-simple-matchmedia

Usage

Edit hopeful-jennings-cho5q

Pre-defined media queries:

media value
phone (min-width: 320px) and (max-width: 568px)
tablet (min-width : 768px) and (max-width : 1024px)
desktop (min-width : 1224px)

With pre-defined query:

import useReactSimpleMatchMedia from 'react-simple-matchmedia'

const MediaQueryComponent = () => {
  const matched = useReactSimpleMatchMedia('phone');

  return (
    <Fragment>
      { matched && '<div>I am only visible and rendered in DOM on phone screen!</div>'}
    </Fragment>
  );
}

With custom queries:

import useReactSimpleMatchMedia from 'react-simple-matchmedia'

const MediaQueryComponent = () => {
  const matched = useReactSimpleMatchMedia('(min-width: 600) and (max-width: 1200px)');

  return (
    <Fragment>
      { matched && '<div>I am only visible and rendered in DOM between 600px and 1200px</div>'}
    </Fragment>
  );
}

Enjoy and have fun!

Install

npm i react-simple-matchmedia

DownloadsWeekly Downloads

354

Version

3.0.2

License

MIT

Unpacked Size

8.91 kB

Total Files

5

Last publish

Collaborators

  • avatar