# yocontra/react-responsive

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/yocontra-react-responsive).**

7,171 stars · 293 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/yocontra/react-responsive
- Homepage: https://contra.io/react-responsive
- awesome-repositories: https://awesome-repositories.com/repository/yocontra-react-responsive.md

## Topics

`react`

## Description

react-responsive is a media query library for React used to implement responsive design by conditionally rendering components based on viewport dimensions. It provides hooks and utilities for viewport detection and monitoring screen characteristics and orientation changes.

The library includes a server-side rendering mock and device simulation capabilities. These allow for the manual override of device settings via properties or context to ensure consistent rendering during server-side operations and to facilitate automated UI testing.

The project covers device characteristic detection and viewport monitoring. It employs a callback system and listeners that execute functions whenever a monitored media query state transitions.

## Tags

### User Interface & Experience

- [Responsive Design](https://awesome-repositories.com/f/user-interface-experience/responsive-design.md) — Enables the creation of adaptive layouts by conditionally rendering React components based on CSS media queries.
- [Device Detection Utilities](https://awesome-repositories.com/f/user-interface-experience/device-detection-utilities.md) — Offers utilities for monitoring screen dimensions and orientation changes to trigger device-specific logic.
- [MediaQueryList API Integrations](https://awesome-repositories.com/f/user-interface-experience/mediaquerylist-api-integrations.md) — Implements media query detection using the native browser API to evaluate and track screen characteristic changes.
- [Responsive Viewport Monitoring](https://awesome-repositories.com/f/user-interface-experience/responsive-viewport-monitoring.md) — Provides utilities for tracking window dimensions and media queries to adapt application state in real-time.
- [Media Query Observers](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/conditional-style-queries/document-media-queries/media-query-observers.md) — Ships a callback system that triggers functions whenever a monitored media query transitions between true and false. ([source](https://cdn.jsdelivr.net/gh/yocontra/react-responsive@master/README.md))
- [Context-Based Dependency Injection](https://awesome-repositories.com/f/user-interface-experience/context-based-dependency-injection.md) — Uses a provider to distribute manual device overrides across the component tree without prop drilling.
- [Viewport Change Callbacks](https://awesome-repositories.com/f/user-interface-experience/viewport-change-callbacks.md) — Provides a callback system that executes user-defined functions immediately after a media query state change.

### Operating Systems & Systems Programming

- [Viewport Event Listeners](https://awesome-repositories.com/f/operating-systems-systems-programming/input-coordinate-translations/viewport-to-pixel-translations/viewport-event-listeners.md) — Employs a global window listener to monitor resize events and notify all active media query subscriptions.

### Software Engineering & Architecture

- [Reactive State Subscriptions](https://awesome-repositories.com/f/software-engineering-architecture/reactive-state-subscriptions.md) — Triggers component re-renders only when a specific monitored media query transitions between true and false.
- [Device Dimension Overrides](https://awesome-repositories.com/f/software-engineering-architecture/logic-overrides/device-dimension-overrides.md) — Prioritizes manually passed device dimensions over native browser values to facilitate automated UI testing.

### Web Development

- [React Media Query Libraries](https://awesome-repositories.com/f/web-development/react-media-query-libraries.md) — Provides a specialized tool for implementing responsive design in React using CSS media queries.
- [Server-Side Rendering](https://awesome-repositories.com/f/web-development/server-side-rendering.md) — Manages device state during server-side rendering to ensure consistent output before client-side hydration.
- [Device State Mocks](https://awesome-repositories.com/f/web-development/server-side-rendering/device-state-mocks.md) — Implements a mechanism to override device settings via context to ensure consistency during server-side operations.

### Development Tools & Productivity

- [Viewport Characteristic Overrides](https://awesome-repositories.com/f/development-tools-productivity/configuration-profiles/inherited-profiles/device-inheritance-overrides/viewport-characteristic-overrides.md) — Allows manual specification of device characteristics via properties or context for consistent testing and rendering. ([source](https://cdn.jsdelivr.net/gh/yocontra/react-responsive@master/README.md))

### Testing & Quality Assurance

- [UI Test Engines](https://awesome-repositories.com/f/testing-quality-assurance/software-testing/testing-frameworks/ui/ui-test-engines.md) — Allows manual overriding of media query states to verify responsive layouts within automated testing environments.