{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-responsive"],"cli":null},"imports":["import { useMediaQuery } from 'react-responsive'","import MediaQuery from 'react-responsive'","import type { UseMediaQueryOptions } from 'react-responsive'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}