A simple and efficient React hook for matching media queries.
MIT License
A simple and efficient React hook for matching media queries.
To install the use-media-query-react
package, you can use either npm/yarn/pnpm/bun:
pnpm install use-media-query-react
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.
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.
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
.
MIT
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.
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!