Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aganglada/use-react-media
⚡ react-media with Hooks
https://github.com/aganglada/use-react-media
hooks media-queries react react-media
Last synced: 7 days ago
JSON representation
⚡ react-media with Hooks
- Host: GitHub
- URL: https://github.com/aganglada/use-react-media
- Owner: aganglada
- Created: 2019-11-24T15:19:41.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T01:48:57.000Z (about 2 years ago)
- Last Synced: 2024-11-15T03:37:41.689Z (2 months ago)
- Topics: hooks, media-queries, react, react-media
- Language: TypeScript
- Homepage:
- Size: 561 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# use-react-media
⚡ react-media with Hooks
⚡ Written in Typescript
⚡ Just the code you need (330b minified)
⚡ SSR Ready
## Install
`npm i use-react-media`
or
`yarn add use-react-media`
## Basic Usage
```jsx
import React from 'react'
import useMedia from 'use-react-media'function App() {
const matches = useMedia('(min-width: 600px)')return
{matches ? 'Matching' : 'Not matching'}
}
```## Parameters
- **query**, a valid media query (`(min-width: 600px)`)
- **defaultMatches**, for SSR.## Server Side Rendering
If you want to render your component on the server side, you will need to use `defaultMatches` to tell the server side which version of the component you will want to render, maybe by analizing the user agent like bellow or any other mecanism.
```jsx
import React from 'react'
import useMedia from 'use-react-media'function App() {
const matches = useMedia(
'(min-width: 600px)',
/mobile/i.test(userAgent) // server user agent
)return
{matches ? 'Matching' : 'Not matching'}
}
```### Contributing
I would love to see you contributing to use-react-media, also by giving feedback.
If you think something is missing, [create a new issue](https://github.com/aganglada/use-react-media/issues).[Pull request](https://github.com/aganglada/use-react-media/pulls) are more than welcome ❤️️
### License
MIT