or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

component-api.mdcontext-utilities.mdhook-api.mdindex.md
tile.json

tessl/npm-react-responsive

Media queries in React for responsive design with hook and component APIs

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-responsive@10.0.x

To install, run

npx @tessl/cli install tessl/npm-react-responsive@10.0.0

index.mddocs/

React Responsive

React Responsive is a comprehensive TypeScript React library for implementing responsive design using media queries. It provides both hook-based (useMediaQuery) and component-based (MediaQuery) APIs for detecting and responding to different screen sizes, device orientations, pixel densities, and other media features.

Package Information

  • Package Name: react-responsive
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-responsive

Core Imports

import { useMediaQuery, MediaQuery, toQuery, Context } from "react-responsive";

For default export:

import MediaQuery from "react-responsive";

For type imports:

import type { 
  MediaQueryTypes, 
  MediaQueryType, 
  MediaQueryFeatures, 
  MediaQueryMatchers, 
  MediaQueryAllQueryable 
} from "react-responsive";

For CommonJS:

const { useMediaQuery, MediaQuery, toQuery, Context } = require("react-responsive");

Basic Usage

import React from "react";
import { useMediaQuery, MediaQuery } from "react-responsive";

const ResponsiveExample = () => {
  // Hook-based usage
  const isDesktop = useMediaQuery({ minWidth: 1224 });
  const isMobile = useMediaQuery({ maxWidth: 768 });

  return (
    <div>
      {/* Hook-based conditional rendering */}
      {isDesktop && <p>Desktop view</p>}
      {isMobile && <p>Mobile view</p>}

      {/* Component-based conditional rendering */}
      <MediaQuery minWidth={1224}>
        <p>This shows on desktop</p>
      </MediaQuery>

      <MediaQuery maxWidth={768}>
        {(matches) => (matches ? <p>Mobile detected</p> : <p>Not mobile</p>)}
      </MediaQuery>
    </div>
  );
};

Architecture

React Responsive is built around several key components:

  • Hook API: useMediaQuery provides programmatic media query detection for responsive logic
  • Component API: MediaQuery component enables declarative conditional rendering based on media queries
  • Context System: React Context for providing device settings for SSR and testing scenarios
  • Type System: Complete TypeScript definitions for all media query properties and responsive features
  • Utility Functions: Helper functions for media query string generation and device property handling

Capabilities

Hook API

Programmatic media query detection using React hooks. Perfect for conditional logic, state management, and dynamic behavior based on screen characteristics.

function useMediaQuery(
  settings: MediaQuerySettings,
  device?: MediaQueryMatchers,
  onChange?: (matches: boolean) => void
): boolean;

type MediaQuerySettings = Partial<MediaQueryAllQueryable & { query?: string }>;

Hook API

Component API

Declarative conditional rendering using React components. Ideal for showing/hiding UI elements based on media queries with clean JSX syntax.

interface MediaQueryProps extends MediaQueryAllQueryable {
  component?: ReactNode;
  children?: ReactNode | ((matches: boolean) => ReactNode);
  query?: string;
  style?: CSSProperties;
  className?: string;
  device?: MediaQueryMatchers;
  values?: Partial<MediaQueryMatchers>;
  onBeforeChange?: (matches: boolean) => void;
  onChange?: (matches: boolean) => void;
}

const MediaQuery: FC<MediaQueryProps>;

Component API

Context and Utilities

Context providers for SSR scenarios and utility functions for media query string generation and device property management.

const Context: React.Context<Partial<MediaQueryAllQueryable> | undefined>;

function toQuery(obj: Partial<MediaQueryAllQueryable>): string;

Context and Utilities

Core Types

interface MediaQueryTypes {
  all?: boolean;
  grid?: boolean;
  aural?: boolean;
  braille?: boolean;
  handheld?: boolean;
  print?: boolean;
  projection?: boolean;
  screen?: boolean;
  tty?: boolean;
  tv?: boolean;
  embossed?: boolean;
}

interface MediaQueryMatchers {
  aspectRatio?: string;
  deviceAspectRatio?: string;
  height?: number | string;
  deviceHeight?: number | string;
  width?: number | string;
  deviceWidth?: number | string;
  color?: boolean;
  colorIndex?: boolean;
  monochrome?: boolean;
  resolution?: number | string;
  orientation?: "portrait" | "landscape";
  scan?: "progressive" | "interlace";
  type?: MediaQueryType;
}

interface MediaQueryFeatures extends MediaQueryMatchers {
  minAspectRatio?: string;
  maxAspectRatio?: string;
  minDeviceAspectRatio?: string;
  maxDeviceAspectRatio?: string;
  minHeight?: number | string;
  maxHeight?: number | string;
  minDeviceHeight?: number | string;
  maxDeviceHeight?: number | string;
  minWidth?: number | string;
  maxWidth?: number | string;
  minDeviceWidth?: number | string;
  maxDeviceWidth?: number | string;
  minColor?: number;
  maxColor?: number;
  minColorIndex?: number;
  maxColorIndex?: number;
  minMonochrome?: number;
  maxMonochrome?: number;
  minResolution?: number | string;
  maxResolution?: number | string;
}

interface MediaQueryAllQueryable extends MediaQueryFeatures, MediaQueryTypes {}

type MediaQueryType = keyof MediaQueryTypes;