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-reactHere'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.
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!