https://github.com/u-wave/react-mq
Barebones CSS media query component for React, ~540 bytes
https://github.com/u-wave/react-mq
Last synced: 4 months ago
JSON representation
Barebones CSS media query component for React, ~540 bytes
- Host: GitHub
- URL: https://github.com/u-wave/react-mq
- Owner: u-wave
- License: mit
- Created: 2018-06-16T19:58:04.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-09-18T06:15:09.000Z (over 4 years ago)
- Last Synced: 2025-03-29T03:51:23.537Z (10 months ago)
- Language: JavaScript
- Homepage: https://u-wave.net/react-mq/
- Size: 313 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-web-dev-resources - react-mq
README
# @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][]
```js
import Media from '@u-wave/react-mq';
Rendered on desktop-size screens only
Does it match? {matches ? 'yes' : 'no'}}
/>
```
## Props
| Name | Type | Description |
|:-----|:-----|:-----|
| query | string | A [media query string][Media queries]. |
| 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](https://github.com/contra/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](https://github.com/ReactTraining/react-media) - Supports specifying media query properties as an object. It doesn't support the simple boolean `Rendered if match` syntax.
## License
[MIT][]
[Install]: #install
[Usage]: #usage
[Props]: #props
[Demo]: https://u-wave.github.io/react-mq
[Demo source code]: ./example
[MIT]: ./LICENSE
[Media queries]: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
[use-mediaquery]: https://github.com/WickyNilliams/use-mediaquery