use-media-query-react
v0.1.2
Published
A simple and efficient React hook for matching media queries.
Downloads
199
Maintainers
Readme
use-media-query-react
A simple and efficient React hook for matching media queries.
Installation
To install the use-media-query-react
package, you can use either npm/yarn/pnpm/bun:
pnpm install use-media-query-react
Usage
Here's a basic example of how to use the useMediaQuery
hook:
import { useMediaQuery } from 'use-media-query-react'
const MyComponent = () => {
const isMobile = useMediaQuery('(max-width: 768px)')
return (
<p>
{isMobile ? 'Mobile view' : 'Desktop view'}
</p>
)
}
In this example, useMediaQuery
will return true
if the viewport is 768px or less, and false
otherwise. This value will update dynamically as the window is resized.
API
useMediaQuery(query: string)
The useMediaQuery
hook accepts a single argument, a string that represents the media query to match.
It returns a boolean value that indicates whether the media query matches the current viewport size.
Server-side Support
This hook is safe to use with server-side rendering. If window
is undefined (as it would be during server-side rendering), useMediaQuery
will return false
.
License
MIT
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
Contact
If you have any questions, feel free to raise an issue.
That's it! You're ready to start using use-media-query-react
in your React project. Enjoy!