React Media Queries

react-media-queries is a React hooks library that provides useful custom hooks for responsive design and media queries.

Installation

npm i @alejandrorm-dev/react-media-queries

Demo

Demo.mov

Hooks

useMediaQuery

A React hook for evaluating a media query.

Usage

import { useMediaQuery } from 'mx-hooks';

function MyComponent() {
  const isLargeScreen = useMediaQuery('(min-width: 1200px)');

  return <div>{isLargeScreen ? 'Large screen' : 'Small screen'}</div>;
}

useMediaQueries

A React hook that provides boolean values for common media query states.

Usage

import { useMediaQueries } from 'mx-hooks';

function MyComponent() {
  const { isDesktop, isTablet, isMobile, isLandscape, isPortrait } = useMediaQueries();

  return (
    <div>
      <p>Device type: {isDesktop ? 'Desktop' : isTablet ? 'Tablet' : 'Mobile'}</p>
      <p>Orientation: {isLandscape ? 'Landscape' : 'Portrait'}</p>
    </div>
  );
}

API Reference

useMediaQuery(query: string): boolean

• query: A media query string to evaluate.
• Returns: true if the media query matches the current viewport, false otherwise.

useMediaQueries(queries?: object): object

• queries (optional): An object containing custom media query strings. If not provided, default queries will be used.
• Returns: An object with the following boolean properties:
  • isDesktop: true if the viewport width is at least 1025px.
  • isTablet: true if the viewport width is between 768px and 1024px.
  • isMobile: true if the viewport width is up to 767px.
  • isLandscape: true if the viewport orientation is landscape.
  • isPortrait: true if the viewport orientation is portrait.

Default Media Queries

The useMediaQueries hook uses the following default media queries:

• Desktop: (min-width: 1025px)
• Tablet: (min-width: 768px) and (max-width: 1024px)
• Mobile: (max-width: 767px)
• Landscape: (orientation: landscape)
• Portrait: (orientation: portrait)

You can override these by passing your own queries object to useMediaQueries.

License

This project is licensed under the MIT License.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Alejandro Ramírez Muñoz 💻 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!