Use Media Query

@react-hooks-hub/use-media-query is a custom React hook that provides the state of the screen's device type (desktop, tablet, mobile) and orientation (portrait, landscape). It's designed to create responsive interfaces and adapt content based on screen size.

       

Installation

Use your preferred package manager to install @react-hooks-hub/use-media-query:

1npm install @react-hooks-hub/use-media-query
2# or
3yarn add @react-hooks-hub/use-media-query

Usage

Import and use the useMediaQuery hook in your component:

1import React from 'react';
2import { useMediaQuery } from '@react-hooks-hub/use-media-query';
3
4const MyComponent = () => {
5  const { device, orientation } = useMediaQuery();
6
7  return (
8    <div>
9      <p>Device: {device}</p>
10      <p>Orientation: {orientation}</p>
11    </div>
12  );
13};
14
15export default MyComponent;

Options

You can customize the behavior of the hook by passing options when using it:

1const { device, orientation } = useMediaQuery({
2  breakpoints: { desktop: 1200, tablet: 768, mobile: 0 },
3  debounceDelay: 300
4});

• 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:

1const { device } = useMediaQuery({
2  breakpoints: { desktop: 1200, tablet: 768, mobile: 0, custom: 1500 }
3});
4
5// Usage in JSX
6{device === 'custom' && <p>Custom screen size</p>}

License

MIT