Registry / web-framework / react-responsive

react-responsive

library10.0.1jsnpmunverified

react-responsive is a well-established and actively maintained library (current stable version 10.0.1) that simplifies the integration of CSS media queries into React applications. It provides a declarative API for responsive design, allowing developers to render components or apply logic based on viewport characteristics. The library offers two primary interfaces: the modern `useMediaQuery` hook (introduced in v8.0.0) for functional components and a `MediaQuery` component (using render props) for class components or older patterns. Key differentiators include its support for both hooks and component-based approaches, convenient camel-cased shorthand properties for media query expressions, and a `device` prop for explicitly setting device characteristics, which is crucial for server-side rendering (SSR) and testing environments. It also ships with comprehensive TypeScript types, ensuring robust development. The library maintains a steady release cadence, focusing on stability and modern React paradigms.

web-framework

npm install react-responsive

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-RESPONSIVE

react-responsive

web-frameworkjavascriptv10.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

useMediaQuery

✓ import { useMediaQuery } from 'react-responsive'

✗ const { useMediaQuery } = require('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

✓ import MediaQuery from 'react-responsive'

✗ 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

✓ import type { UseMediaQueryOptions } from 'react-responsive'

✗ import { 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.

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;

Debug

Known issues

breakingThe `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.

affects: <8.0.0

gotchaWhen 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 })`.

affects: >=1.0.0

gotchaThe `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.

affects: >=1.0.0

gotchaShorthand 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 }`.

affects: >=1.0.0

Errors

Common errors & fixes

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

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

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

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() }));`.

Upgrade

Version history

10.0.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency for all React applications.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/yocontra/react-responsive ↗

packagehttps://www.npmjs.com/package/react-responsive ↗

homepagehttps://contra.io/react-responsive ↗