Skip to content

React hook used for matching media queries. (It doesn't exist in DOM if media query is not matched)

License

Notifications You must be signed in to change notification settings

prosperity-tech/react-simple-matchmedia

 
 

Repository files navigation

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!

About

React hook used for matching media queries. (It doesn't exist in DOM if media query is not matched)

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%