{"id":11844,"library":"react-responsive","title":"React Responsive Media Queries","description":"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.","status":"active","version":"10.0.1","language":"javascript","source_language":"en","source_url":"git://github.com/yocontra/react-responsive","tags":["javascript","css","react-component","viewport","react","mobile","media queries","respond","media query","typescript"],"install":[{"cmd":"npm install react-responsive","lang":"bash","label":"npm"},{"cmd":"yarn add react-responsive","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-responsive","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for all React applications.","package":"react","optional":false}],"imports":[{"note":"This hook provides a modern, functional approach to media queries and is available since v8.0.0. For TypeScript, types can be imported separately.","wrong":"const { useMediaQuery } = require('react-responsive')","symbol":"useMediaQuery","correct":"import { useMediaQuery } from 'react-responsive'"},{"note":"The `MediaQuery` component is a default export, typically used with render props. Be careful not to use named import syntax.","wrong":"import { MediaQuery } from 'react-responsive'","symbol":"MediaQuery","correct":"import MediaQuery from 'react-responsive'"},{"note":"When importing types in TypeScript, use the `type` keyword for clarity and to ensure type-only imports are correctly handled by bundlers.","wrong":"import { UseMediaQueryOptions } from 'react-responsive'","symbol":"UseMediaQueryOptions","correct":"import type { UseMediaQueryOptions } from 'react-responsive'"}],"quickstart":{"code":"import React from 'react';\nimport { useMediaQuery } from 'react-responsive';\n\nconst MyResponsiveComponent = () => {\n  const isMobile = useMediaQuery({ maxWidth: 767 });\n  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 1023 });\n  const isDesktop = useMediaQuery({ minWidth: 1024 });\n  const isPortrait = useMediaQuery({ orientation: 'portrait' });\n\n  return (\n    <div>\n      <h2>Responsive View</h2>\n      {isMobile && <p>You are viewing this on a Mobile device!</p>}\n      {isTablet && <p>You are viewing this on a Tablet!</p>}\n      {isDesktop && <p>You are viewing this on a Desktop!</p>}\n      <p>Orientation: {isPortrait ? 'Portrait' : 'Landscape'}</p>\n\n      <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>\n    </div>\n  );\n};\n\nexport default MyResponsiveComponent;\n","lang":"typescript","description":"Demonstrates the `useMediaQuery` hook for conditional rendering based on mobile, tablet, desktop, and orientation media queries."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":"<8.0.0"},{"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 })`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For non-pixel units, pass the value as a string: `{ minWidth: '60em' }` instead of `{ minWidth: 960 }`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Upgrade `react-responsive` to version `8.0.0` or higher (`npm install react-responsive@latest` or `yarn add react-responsive@latest`).","cause":"Attempting to use `useMediaQuery` in a project where `react-responsive` version is older than 8.0.0.","error":"TypeError: (0 , react_responsive__WEBPACK_IMPORTED_MODULE_2__.useMediaQuery) is not a function"},{"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' })`.","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`.","error":"ReferenceError: window is not defined"},{"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() }));`.","cause":"This often occurs in testing environments (like Jest) where `window.matchMedia` is not mocked, and `react-responsive` attempts to call its methods.","error":"TypeError: Cannot read properties of undefined (reading 'addListener') at MatchMedia.componentDidMount"}],"ecosystem":"npm"}