@u-wave/react-mq
Barebones CSS media query component for React in ~560 bytes
Last updated 2 years ago by goto-bus-stop .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @u-wave/react-mq 
SYNC missed versions from official npm registry.

@u-wave/react-mq

Barebones CSS media query component for React

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

  • 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

Current Tags

  • 1.0.2                                ...           latest (2 years ago)

3 Versions

  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (1)
Dev Dependencies (17)

Copyright 2014 - 2016 © taobao.org |