@react-hooks-hub/use-media-query
v1.1.7
Published
This react hook provide the state and the orientation of the screen
Downloads
811
Maintainers
Readme
Installation
Use your preferred package manager to install @react-hooks-hub/use-media-query
:
npm install @react-hooks-hub/use-media-query
# or
yarn add @react-hooks-hub/use-media-query
Usage
Import and use the useMediaQuery hook in your component:
import React from 'react';
import { useMediaQuery } from '@react-hooks-hub/use-media-query';
const MyComponent = () => {
const { device, orientation } = useMediaQuery();
return (
<div>
<p>Device: {device}</p>
<p>Orientation: {orientation}</p>
</div>
);
};
export default MyComponent;
Options
You can customize the behavior of the hook by passing options when using it:
const { device, orientation } = useMediaQuery({
breakpoints: { desktop: 1200, tablet: 768, mobile: 0 },
debounceDelay: 300
});
- breakpoints: An object defining the breakpoints for each device type. By default, breakpoints are set for desktop, tablet, and mobile.
- debounceDelay: Debounce delay to limit frequent calls during window resizing.
Examples
Custom Screen Sizes You can define custom screen sizes in the breakpoints option:
const { device } = useMediaQuery({
breakpoints: { desktop: 1200, tablet: 768, mobile: 0, custom: 1500 }
});
// Usage in JSX
{device === 'custom' && <p>Custom screen size</p>}
License
MIT