@react-hooks-hub/use-media-query
TypeScript icon, indicating that this package has built-in type declarations

1.1.6 • Public • Published

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.


NPM version   CI status   Coverage   Bundlephobia  



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

Package Sidebar

Install

npm i @react-hooks-hub/use-media-query

Weekly Downloads

263

Version

1.1.6

License

MIT

Unpacked Size

16.5 kB

Total Files

10

Last publish

Collaborators

  • keized