React Responsive Media Queries

Common errors

• TypeError: (0 , react_responsive__WEBPACK_IMPORTED_MODULE_2__.useMediaQuery) is not a function

  cause Attempting to use `useMediaQuery` in a project where `react-responsive` version is older than 8.0.0.
  fix Upgrade `react-responsive` to version `8.0.0` or higher (`npm install react-responsive@latest` or `yarn add react-responsive@latest`).

• ReferenceError: window is not defined

  cause The component using `react-responsive` is being rendered in a Node.js environment (e.g., SSR) without providing a `device` prop to simulate `window.matchMedia`.
  fix When using `useMediaQuery` or `MediaQuery` in SSR, provide a second argument with a `device` object, e.g., `useMediaQuery({ minWidth: 1024 }, { deviceWidth: 1920, deviceHeight: 1080, type: 'screen' })`.

• TypeError: Cannot read properties of undefined (reading 'addListener') at MatchMedia.componentDidMount

  cause This often occurs in testing environments (like Jest) where `window.matchMedia` is not mocked, and `react-responsive` attempts to call its methods.
  fix Mock `window.matchMedia` in your test setup. A common mock is `window.matchMedia = jest.fn().mockImplementation(query => ({ matches: false, media: query, onchange: null, addListener: jest.fn(), removeListener: jest.fn(), dispatchEvent: jest.fn() }));`.

Warnings

• breaking The `useMediaQuery` hook was introduced in version 8.0.0. Projects using older versions of `react-responsive` will not have access to this API and must use the `MediaQuery` component or upgrade.
  Fix: Upgrade to `react-responsive@8.0.0` or higher to use the `useMediaQuery` hook. Otherwise, rely on the `MediaQuery` component with a render prop.
• gotcha When using `react-responsive` in a Node.js environment (e.g., Server-Side Rendering - SSR), `window.matchMedia` is unavailable, leading to incorrect or no media query matches. You must explicitly provide device characteristics via the `device` prop.
  Fix: Pass a second argument to `useMediaQuery` or `MediaQuery` component with the `device` prop to simulate client-side conditions, e.g., `useMediaQuery({ minWidth: 1224 }, { deviceWidth: 1600 })`.
• gotcha The `device` prop, when provided, always takes precedence over actual client-side `window.matchMedia` detections. This can lead to unexpected behavior if not understood, as the component will render based on the provided `device` values, even if the user's actual device settings differ.
  Fix: Only use the `device` prop when explicitly needing to override or simulate device characteristics (e.g., in SSR, testing, or specific development scenarios). Avoid using it for general client-side rendering where dynamic detection is desired.
• gotcha Shorthand properties like `minWidth` or `maxWidth` automatically append `px` to numeric values. If you intend to use other units (e.g., `em`, `rem`), you must provide the value as a string.
  Fix: For non-pixel units, pass the value as a string: `{ minWidth: '60em' }` instead of `{ minWidth: 960 }`.

Install

• npm install react-responsive npm
• yarn add react-responsive yarn
• pnpm add react-responsive pnpm

Imports

• useMediaQuery
  wrong:

  const { useMediaQuery } = require('react-responsive')

  correct:

  import { useMediaQuery } from 'react-responsive'

  This hook provides a modern, functional approach to media queries and is available since v8.0.0. For TypeScript, types can be imported separately.
• MediaQuery
  wrong:

  import { MediaQuery } from 'react-responsive'

  correct:

  import MediaQuery from 'react-responsive'

  The `MediaQuery` component is a default export, typically used with render props. Be careful not to use named import syntax.
• UseMediaQueryOptions
  wrong:

  import { UseMediaQueryOptions } from 'react-responsive'

  correct:

  import type { UseMediaQueryOptions } from 'react-responsive'

  When importing types in TypeScript, use the `type` keyword for clarity and to ensure type-only imports are correctly handled by bundlers.

Quickstart

Demonstrates the `useMediaQuery` hook for conditional rendering based on mobile, tablet, desktop, and orientation media queries.

import React from 'react';
import { useMediaQuery } from 'react-responsive';

const MyResponsiveComponent = () => {
  const isMobile = useMediaQuery({ maxWidth: 767 });
  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 1023 });
  const isDesktop = useMediaQuery({ minWidth: 1024 });
  const isPortrait = useMediaQuery({ orientation: 'portrait' });

  return (
    <div>
      <h2>Responsive View</h2>
      {isMobile && <p>You are viewing this on a Mobile device!</p>}
      {isTablet && <p>You are viewing this on a Tablet!</p>}
      {isDesktop && <p>You are viewing this on a Desktop!</p>}
      <p>Orientation: {isPortrait ? 'Portrait' : 'Landscape'}</p>

      <p>This demonstrates how to use the `useMediaQuery` hook to conditionally render content based on various screen dimensions and orientations. It's a clean way to apply responsive logic directly within your functional components.</p>
    </div>
  );
};

export default MyResponsiveComponent;