https://github.com/bence-toth/react-hook-media-query
A React hook to match media queries
https://github.com/bence-toth/react-hook-media-query
media-queries react react-hooks
Last synced: 4 days ago
JSON representation
A React hook to match media queries
- Host: GitHub
- URL: https://github.com/bence-toth/react-hook-media-query
- Owner: bence-toth
- License: lgpl-3.0
- Created: 2019-02-18T21:43:31.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-11-21T11:45:48.000Z (over 3 years ago)
- Last Synced: 2025-06-06T09:08:14.898Z (27 days ago)
- Topics: media-queries, react, react-hooks
- Language: JavaScript
- Size: 82 KB
- Stars: 11
- Watchers: 1
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-hook-media-query :triangular_ruler:
A React hook to match media queries.
## Installation
Using `npm`:
```sh
npm install --save react-hook-media-query
```
Using `yarn`:
```sh
yarn add react-hook-media-query
```
## Usage
```jsx
import React from 'react'
import useMediaQuery from 'react-hook-media-query'
const ComponentWithMediaQuery = () => {
const small = useMediaQuery('(max-width: 720px)')
return (
Viewport width is {small ? 'below' : 'above'} 720.
)
}
```
## Contributions
Contributions are welcome. File bug reports, create pull requests, feel free to reach out at [email protected].
## Licence
LGPL-3.0