react-simple-matchmedia

React component used for matching media queries

Usage no npm install needed!

<script type="module">
  import reactSimpleMatchmedia from 'https://cdn.skypack.dev/react-simple-matchmedia';
</script>

README

react-simple-matchmedia

install size

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

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!