react-device-detect

react-device-detect is a user-agent-sniffing library for React applications that identifies the current device type, browser, and operating system, then exposes both boolean selectors (isMobile, isBrowser, isIE) and dedicated view components (<BrowserView>, <MobileView>, <CustomView>) for conditionally rendering UI based on the detection result.

It’s explicitly scoped to scenarios where you need to know something specific about the device or browser itself — targeting a particular browser (Chrome, Safari, IE) or device category (all iPods, smart TVs, consoles) — as opposed to responsive layout concerns, which the README steers developers toward CSS media queries or matchMedia-based libraries instead. The library also exposes a testing escape hatch, letting tests override isMobile and similar flags directly.

What You Get

• Boolean selectors like isMobile, isBrowser, isTablet, isIE, isChrome, and dozens more device/browser checks
• Dedicated view components (BrowserView, MobileView, TabletView, CustomView) for conditional rendering by device type
• String metadata such as browserName, osName, deviceType, and mobileModel for more granular logic
• A withOrientationChange HOC for reacting to device orientation changes
• A testing escape hatch that lets test suites directly override isMobile and other flags

Common Use Cases

• Showing a “download our app” banner only to mobile visitors on a marketing site
• Rendering a simplified UI variant specifically for smart TVs or game consoles browsing a web app
• Displaying an unsupported-browser warning targeted at Internet Explorer users
• Adjusting analytics or feature flags based on detected device/browser combination rather than screen size alone

Under The Hood

Architecture - The library is small and layered: src/lib/parse.js runs user-agent parsing (built on the ua-parser-js-style detection approach), src/lib/detect.js derives boolean device/browser flags from the parsed data, src/lib/buildSelectors.js and src/lib/selectors.js assemble the exported selector object, and src/components/views.js wraps those selectors into conditionally-rendering React components. src/components/hooks/ provides hook-based equivalents for consumers who prefer hooks over the view-component pattern.

Tech Stack - Plain JavaScript (no TypeScript source, though index.d.ts ships hand-written type declarations), built with Rollup per rollup.config.js, with React declared as a peer dependency so it doesn’t bundle its own copy.

Code Quality - Tests live in specs/ (get-ua-data.spec.js, types.spec.js, views.spec.js), covering both the raw detection logic and the exported view components. The library is compact (~250 lines across src/lib/), which keeps it easy to audit, though it has seen no recent commits, consistent with the README’s own framing that the library is intentionally narrow in scope and largely feature-complete for its purpose.

API Design - The dual API surface — plain booleans for quick conditionals (if (isMobile) ...) and JSX view components for declarative rendering (<MobileView>...</MobileView>) — covers both common consumption styles with no extra ceremony, and the README is explicit about when not to reach for this library (pointing to CSS media queries for pure responsive layout), which is a rare and useful bit of restraint in a library’s own documentation.