react-simple-matchmedia

3.3.0 • Public • Published

react-simple-matchmedia

install size

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

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!

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 3.3.0
    101
    • latest

Version History

Package Sidebar

Install

npm i react-simple-matchmedia

Weekly Downloads

318

Version

3.3.0

License

MIT

Unpacked Size

9.9 kB

Total Files

6

Last publish

Collaborators

  • egdfer