React Media Query Hooks Package

A simple and efficient set of React hooks for responsive design using media queries. This package provides:

• A flexible useMediaQuery custom hook for any CSS media query.
• A convenient useBreakpoints hook that returns semantic breakpoint booleans (xs, sm, md, lg, xl, xxl) for common screen widths, inspired by standard CSS breakpoints.
• A useColorScheme hook to detect light or dark mode preference.
• A useOrientation hook to detect device orientation (portrait or landscape).

Installation

npm install better-react-breakpoints

Usage

1. Using the useBreakpoints Hook

Call useBreakpoints() inside your component to access standard breakpoint booleans.

import { useBreakpoints } from "better-react-breakpoints";

function MyComponent() {
  const { xs, sm, md, lg, xl, xxl } = useBreakpoints();

  return (
    <div>
      {md ? "Medium or larger screen" : "Small screen"}
      {lg && "Large screen (≥1024px)"}
    </div>
  );
}

Available Breakpoints:

| Name | Min Width | |------|-----------| | xs | 320px | | sm | 640px | | md | 768px | | lg | 1024px | | xl | 1280px | | xxl | 1536px |

Each resolves to a boolean indicating whether the current window width matches or exceeds the specified breakpoint.

2. Using the useColorScheme Hook

Detect whether the user prefers a light or dark color scheme.

import { useColorScheme } from "better-react-breakpoints";

function ThemeComponent() {
  const { isLight, isDark } = useColorScheme();

  return (
    <div>
      {isDark ? "🌙 Dark Mode" : "☀️ Light Mode"}
    </div>
  );
}

3. Using the useOrientation Hook

Detect the current screen orientation (portrait or landscape).

import { useOrientation } from "better-react-breakpoints";

function OrientationComponent() {
  const { isLandscape, isPortrait } = useOrientation();

  return (
    <div>
      {isPortrait ? "📱 Portrait Mode" : "💻 Landscape Mode"}
    </div>
  );
}

API

useMediaQuery(query: string): boolean

• Arguments:

  • query: A valid CSS media query string.

• Returns:

  • Boolean indicating if the media query matches the current viewport.

useBreakpoints(): { xs, sm, md, lg, xl, xxl }

• Returns:
  • An object with boolean values for each standard breakpoint.

useColorScheme(): { isLight: boolean, isDark: boolean }

• Returns:
  • An object indicating whether the user prefers a light or dark color scheme.

useOrientation(): { isLandscape: boolean, isPortrait: boolean }

• Returns:
  • An object indicating the current screen orientation.

Example

import { useBreakpoints, useColorScheme, useOrientation } from "better-react-breakpoints";

function Sidebar() {
  const { md } = useBreakpoints();
  const { isDark } = useColorScheme();
  const { isPortrait } = useOrientation();

  return (
    <div>
      {md ? <DesktopSidebar /> : <MobileSidebar />}
      {isDark && <p>Dark mode enabled</p>}
      {isPortrait && <p>Portrait mode active</p>}
    </div>
  );
}

Notes

• Built using React Hooks — React 16.8+ required.
• All hook values update automatically on window resize or preference change.
• Designed for responsive layouts, conditional rendering, and adapting to user preferences.

License

MIT