@react-hooks-hub/use-media-query NPM

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>}