1. Nimibyte
  3. Open source
  5. Screen detector hook
  • NimibyteFrom vision to version
Platform
  • Home
  • Changelog
  • Account
  • Services
Projects
  • AuditAuth
  • Resqly
Open Source
  • Packages (npm)
Academy
  • Architecture
  • Terms
  • Privacy

Screen Detector Hook

@nimibyte/screen-detector-hook - Responsive state primitives for explicit breakpoint and orientation behavior.

npmGitHub
ReactNext.jsTypeScript

Design Intent

Avoids repeated ad-hoc breakpoint detection across product surfaces.

Breakpoint logic drifts when each component implements local media-query assumptions. Control becomes implicit and difficult to reason about.

Trade-offs: It keeps a constrained API for predictable behavior instead of exposing broad responsive DSLs.

Intentionally not solving: Layout systems, CSS abstraction layers, or design-token orchestration.

API Surface

Setup
  • useScreenDetector(options)
Configuration
  • breakpoints: Record<string, number>
State
  • screen
  • landscape

Use It When

  • You need explicit runtime breakpoint decisions in React components.
  • You need orientation-aware behavior tied to viewport changes.
  • You want shared responsive state semantics across product surfaces.

Avoid It When

  • Pure CSS media queries are enough for your UI.
  • You need a full design-system layout engine.
  • You are targeting non-React environments.

Engineering Signal

This reflects Nimibyte's engineering posture: constrained public surface, explicit trade-offs, and predictable behavior in production. We prioritize maintainable systems over clever runtime tricks.

Explore our engineering approach ->