@u-wave/react-mq

Barebones CSS media query component for React

For new projects, you can use a React Hook for handling media queries. I like use-mediaquery but there are many others!

Install - Usage - Demo - Props

Install

npm install --save @u-wave/react-mq

Usage

Demo - Demo source code

import Media from '@u-wave/react-mq';

<Media query="(min-width: 768px)">
  <div>Rendered on desktop-size screens only</div>
</Media>

<Media
  query="(min-width: 768px)"
  render={matches => <div>Does it match? {matches ? 'yes' : 'no'}</div>}
/>

Props

Name	Type	Description
query	string	A media query string.
children	node	React element(s) to render when query matches.
render	() => node	Render function; receives a single boolean parameter that equals true when query matches, false when it does not.

Either one of the children or render() props must be provided.

Related

• use-mediaquery - A similarly minimalist React Hook.
• react-responsive - The primary inspiration for this module. It also supports specifying media query properties like min-width as props. It has broader browser support than alternatives.
• react-media - Supports specifying media query properties as an object. It doesn't support the simple boolean <Media>Rendered if match</Media> syntax.

License

MIT