react-simple-matchmedia

react-simple-matchmedia

React hook used for matching media queries.
It uses browser's window.matchMedia.
With SSR support

Install

$ yarn add react-simple-matchmedia

or

$ npm i react-simple-matchmedia

Usage

Pre-defined media queries:

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!