1.0.2 • Published 6 years ago
@u-wave/react-mq v1.0.2
@u-wave/react-mq
Barebones CSS media query component for React
Install - Usage - Demo - Props
Install
npm install --save @u-wave/react-mqUsage
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-widthas 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.