{"library":"react-media","title":"React Media Queries","description":"react-media is a React component that enables declarative CSS media queries directly within React applications, simplifying responsive design. As of version 1.10.0, it offers a stable and widely used API for conditionally rendering components based on various viewport characteristics. While its release cadence is moderate rather than rapid, it has consistently received updates addressing compatibility with newer React versions and introducing key features like enhanced Server-Side Rendering (SSR) support via the `defaultMatches` prop and improved iframe integration with the `targetWindow` prop. It distinguishes itself by providing a clean, component-based abstraction over the native `window.matchMedia` API, allowing developers to focus on component logic rather than direct DOM API interaction.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-media"],"cli":null},"imports":["import { Media } from 'react-media';","import { useMedia } from 'react-media';","import type { MediaRenderProps } from 'react-media';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { Media } from 'react-media';\n\ninterface MyResponsiveComponentProps {\n  children: React.ReactNode;\n}\n\nconst MyResponsiveComponent: React.FC<MyResponsiveComponentProps> = ({ children }) => {\n  return (\n    <Media queries={{\n      small: '(max-width: 599px)',\n      medium: '(min-width: 600px) and (max-width: 1199px)',\n      large: '(min-width: 1200px)',\n      print: 'print'\n    }}>\n      {matches => (\n        <div style={{ padding: '20px', border: '1px solid #ccc' }}>\n          {matches.small && <p>You are on a small screen or mobile device.</p>}\n          {matches.medium && <p>You are on a tablet or medium-sized screen.</p>}\n          {matches.large && <p>You are on a desktop or large screen.</p>}\n          {matches.print && <p>Preparing for print!</p>}\n          {!matches.small && !matches.medium && !matches.large && !matches.print && (\n            <p>No specific media query matched (perhaps a server-side render without defaultMatches).</p>\n          )}\n          {children}\n        </div>\n      )}\n    </Media>\n  );\n};\n\nexport default MyResponsiveComponent;","lang":"typescript","description":"This quickstart demonstrates how to use the <Media> component to render different content based on predefined CSS media queries, including handling print media.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}