ReactTraining/react-media
CSS media queries for React observed · 2026-08-28
Health v2 · maintenance only
23/100
- Activity 0
- Release rhythm 8
- Longevity 100
How is this computed?
round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10) — computed 2026-09-02. Adoption (stars, forks) is never an input.
- gap_med: n/a
- age_days: 3682
- days_rel: n/a
- days_push: 2240
- n_releases_24m: 0
Adoption not part of the score
2422 stars · 114 forks observed · 2026-08-28
What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-30, confidence not recorded
react-media is a React component and hook library for matching CSS media queries in JavaScript. It renders children or returns match results based on whether media queries like breakpoints match the current viewport.
Use cases
- render different components for mobile vs desktop breakpoints
- conditionally show elements based on screen width in React
- use a useMedia hook to check if viewport matches a media query
- build responsive layouts without CSS-only hiding
- match multiple named breakpoints at once in a React app
When to choose
- you need JS-driven responsive rendering in React components
- you want a small, focused media query matching utility with hook support
When to avoid
- you only need CSS-based responsiveness with no JS logic
- you use a non-React framework
- you need actively maintained software with recent releases
Facets
library · maturity maintenance
ui-components state-management frontend web-development browser cross-platform react media-queries responsive hooks css responsive-design nodejs
2 sources
- readme: https://github.com/ReactTraining/react-media · fetched 2026-08-28 · 3d04b393b4c3
- registry_npm: https://registry.npmjs.org/react-media · fetched 2026-08-29 · f1ae3ee0d459
Member repositories
| Repository | Role | Health v2 |
|---|---|---|
| ReactTraining/react-media | main | 23 |
For agents
markdown · JSON · MCP: product_card(name="ReactTraining/react-media")
Data as of 2026-08-30T08:39:29.467469+00:00 · Report a problem