@custom-react-hooks/use-media-query
v1.5.1
Published
The `useMediaQuery` hook is designed for responsive design in React applications. It enables components to adapt to different screen sizes or respond to media query changes.
Downloads
2,058
Readme
useMediaQuery Hook
The useMediaQuery
hook is designed for responsive design in React applications. It enables components to adapt to different screen sizes or respond to media query changes.
Features
- Dynamic Media Queries: Accepts any valid CSS media query string.
- SSR Compatibility: Safe for server-side rendering, as it checks for the availability of the
window
object. - Efficient and Optimized: Only updates component state when media query match status changes.
Installation
Installing Only Current Hooks
npm install @custom-react-hooks/use-media-query
or
yarn add @custom-react-hooks/use-media-query
Installing All Hooks
npm install @custom-react-hooks/all
or
yarn add @custom-react-hooks/all
Importing the Hook
The useMediaQuery
hook must be imported using a named import as shown below:
Named Import:
import { useMediaQuery } from '@custom-react-hooks/use-media-query';
This approach ensures that the hook integrates seamlessly into your project, maintaining consistency and predictability in how you use our package.
Usage
Import and use the useMediaQuery
hook in your React components:
import { useMediaQuery } from '@custom-react-hooks/all';
const MediaQueryComponent = () => {
const isWide = useMediaQuery('(min-width: 600px)');
return (
<div>
{isWide ? 'Wide viewport detected' : 'Narrow viewport detected'}
<br />
<span>
<i>Resize to see the effect</i>
</span>
</div>
);
};
export default MediaQueryComponent;
API Reference
Parameters
query
: A string representing the media query to evaluate.
Use Cases
- Responsive Design: Dynamically adjust the layout or functionality based on viewport size.
- Dark Mode Toggle: Switch between light and dark themes based on user's system preferences.
- Adaptive Rendering: Render different components or content based on media query matches.
- Performance Optimization: Load resources conditionally based on the media query (e.g., images for mobile).
Contributing
Contributions to enhance the useMediaQuery
hook are welcome. Feel free to submit issues or pull requests to the repository.