awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
yocontra avatar

yocontra/react-responsive

0
View on GitHub↗
7,171 stars·293 forks·TypeScript·MIT·13 viewscontra.io/react-responsive↗

React Responsive

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.

Features

  • Responsive Design - Enables the creation of adaptive layouts by conditionally rendering React components based on CSS media queries.
  • Viewport Event Listeners - Employs a global window listener to monitor resize events and notify all active media query subscriptions.
  • Reactive State Subscriptions - Triggers component re-renders only when a specific monitored media query transitions between true and false.
  • Device Detection Utilities - Offers utilities for monitoring screen dimensions and orientation changes to trigger device-specific logic.
  • MediaQueryList API Integrations - Implements media query detection using the native browser API to evaluate and track screen characteristic changes.
  • Responsive Viewport Monitoring - Provides utilities for tracking window dimensions and media queries to adapt application state in real-time.
  • Media Query Observers - Ships a callback system that triggers functions whenever a monitored media query transitions between true and false.
  • React Media Query Libraries - Provides a specialized tool for implementing responsive design in React using CSS media queries.
  • Viewport Characteristic Overrides - Allows manual specification of device characteristics via properties or context for consistent testing and rendering.
  • Device Dimension Overrides - Prioritizes manually passed device dimensions over native browser values to facilitate automated UI testing.
  • UI Test Engines - Allows manual overriding of media query states to verify responsive layouts within automated testing environments.
  • Context-Based Dependency Injection - Uses a provider to distribute manual device overrides across the component tree without prop drilling.
  • Viewport Change Callbacks - Provides a callback system that executes user-defined functions immediately after a media query state change.
  • Server-Side Rendering - Manages device state during server-side rendering to ensure consistent output before client-side hydration.
  • Device State Mocks - Implements a mechanism to override device settings via context to ensure consistency during server-side operations.

Star history

Star history chart for yocontra/react-responsiveStar history chart for yocontra/react-responsive

How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI

Projects sharing features with React Responsive

These projects share indexed features with React Responsive. Shared tags can include platform or build tooling; verify the primary use case before treating a result as a replacement.
  • jonataslaw/getxjonataslaw avatar

    jonataslaw/getx

    11,181View on GitHub↗

    GetX is a comprehensive state management framework for Flutter that provides a toolkit for managing application state, dependency injection, and routing without requiring build context. It serves as a core architectural system for reactive state management, navigation, service location, and multi-language theme support. The project is distinguished by its ability to handle context-free navigation and the use of observable variables that automatically trigger user interface updates. It features a dependency injection container with lazy loading and automated memory management, alongside a rout

    Dart
    View on GitHub↗11,181
  • contra/react-responsivecontra avatar

    contra/react-responsive

    7,172View on GitHub↗

    react-responsive is a set of utility tools and hooks for evaluating CSS media queries within React components. It functions as a viewport state manager that detects screen dimensions and triggers user interface changes based on defined breakpoints. The project includes a helper for server-side rendering and automated testing that allows device properties to be overridden via context. This ensures consistent rendering when browser-native detection is unavailable. The library covers adaptive component rendering, viewport change monitoring, and responsive layout detection. It uses the native ma

    TypeScript
    View on GitHub↗7,172
  • emotion-js/emotionemotion-js avatar

    emotion-js/emotion

    18,017View on GitHub↗

    This project is a styling library and framework designed for component-based architectures, enabling developers to define and manage visual styles directly within JavaScript or TypeScript. It functions as a styling engine that generates unique class names from style definitions, ensuring encapsulated, predictable, and maintainable visual presentation across applications. By integrating with component logic, it allows for the creation of reusable UI elements with styles defined through template literals or object syntax. The library distinguishes itself through a comprehensive suite of build-t

    JavaScriptbabel-plugincsscss-in-js
    View on GitHub↗18,017
  • react-page/react-pagereact-page avatar

    react-page/react-page

    9,551View on GitHub↗

    react-page is a browser-based visual content editor and schema-driven page builder developed with React and TypeScript. It provides a framework for creating web pages through a what-you-see-is-what-you-get interface, utilizing a responsive twelve-column grid engine for arranging elements via drag-and-drop manipulation. The system features a plugin-based architecture that allows for the integration of custom components. These components are managed through a schema-driven system that automatically generates data entry forms based on predefined property definitions, separating the rendering vie

    TypeScripteditorreactsites
    View on GitHub↗9,551
Compare all 30 related projects→

Frequently asked questions

What does yocontra/react-responsive do?

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.

What are the main features of yocontra/react-responsive?

The main features of yocontra/react-responsive are: Responsive Design, Viewport Event Listeners, Reactive State Subscriptions, Device Detection Utilities, MediaQueryList API Integrations, Responsive Viewport Monitoring, Media Query Observers, React Media Query Libraries.

Which projects share features with yocontra/react-responsive?

Projects with overlapping indexed features include: jonataslaw/getx — GetX is a comprehensive state management framework for Flutter that provides a toolkit for managing application state,… contra/react-responsive — react-responsive is a set of utility tools and hooks for evaluating CSS media queries within React components. It… emotion-js/emotion — This project is a styling library and framework designed for component-based architectures, enabling developers to… react-page/react-page — react-page is a browser-based visual content editor and schema-driven page builder developed with React and… webstudio-is/webstudio — Webstudio is a visual CMS and website builder that provides a visual development environment for designing and… khan/aphrodite — Aphrodite is a framework-agnostic CSS-in-JS styling library that allows styles to be defined using JavaScript objects.…