feat: add React hooks for device state monitoring#38
Merged
Conversation
- Create src/hooks/ directory for React hooks - Add barrel export file (index.ts) with all hook exports - Add utils.ts with platform-specific low battery threshold - iOS: 20% threshold (matches iOS low power mode) - Android: 15% threshold (matches Android low battery warning)
Add React hooks for battery state monitoring: - useBatteryLevel(): Returns battery level (0.0-1.0) - useBatteryLevelIsLow(): Returns level when below threshold - usePowerState(): Returns comprehensive power state object All hooks use polling-based updates (5s interval for battery, 2s for low battery detection)
Add React hooks for audio device detection: - useIsHeadphonesConnected(): Any headphone connection - useIsWiredHeadphonesConnected(): Wired headphone connection - useIsBluetoothHeadphonesConnected(): Bluetooth audio connection All hooks poll every 1s for connection state changes.
Add useBrightness() hook for screen brightness monitoring: - iOS: Returns brightness level (0.0-1.0), polls every 500ms - Android: Returns -1 (not supported on Android)
Re-export all 7 React hooks from src/index.ts: - useBatteryLevel, useBatteryLevelIsLow, usePowerState - useIsHeadphonesConnected, useIsWiredHeadphonesConnected, useIsBluetoothHeadphonesConnected - useBrightness
Add interactive hooks demonstration screen: - Battery section: level, charging state, low battery warning - Audio Output section: headphone connection status - Display section: brightness level (iOS only) - Real-time timestamp tracking for value updates Update App.tsx with tab navigation: - Properties tab: existing DeviceInfoScreen - Hooks Demo tab: new HooksDemo screen
Add hooks benchmark file with performance tests: - Hook registration time - Hook cleanup validation (1000 cycles, no memory leaks) - Callback latency benchmark Update BenchmarkScreen with: - React Hooks Performance section - Pass/fail badges for each benchmark - Threshold vs actual value display
Add comprehensive hooks documentation: - docs/api/hooks.md: Complete API reference for all 7 hooks with signatures, return types, and platform support tables - docs/guide/react-hooks.md: Usage guide with 5+ examples including battery monitoring, headphone detection, brightness - docs/api/migration.md: Updated with hooks comparison table and migration examples from react-native-device-info Update rspress.config.ts with navigation links: - Add React Hooks to Guide nav and sidebar - Add React Hooks to API Reference nav and sidebar
l2hyunwoo
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds comprehensive React hooks support for real-time device state monitoring, providing a declarative way to track battery status, headphone connections, and display brightness. The implementation includes 7 new hooks with polling-based updates, a tab-based demo screen showcasing all hooks in action, performance benchmarks, and extensive documentation including API references and migration guides.
Key Changes
- 7 React Hooks: Battery monitoring (
useBatteryLevel,useBatteryLevelIsLow,usePowerState), headphone detection (useIsHeadphonesConnected,useIsWiredHeadphonesConnected,useIsBluetoothHeadphonesConnected), and brightness tracking (useBrightness) - Enhanced Example App: Tab navigation with dedicated HooksDemo screen displaying real-time hook values with timestamps
- Documentation: Complete API reference, usage guide, and migration documentation for hooks
Reviewed changes
Copilot reviewed 18 out of 18 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
src/hooks/useBatteryLevel.ts |
Implements battery level monitoring with 5-second polling |
src/hooks/useBatteryLevelIsLow.ts |
Low battery detection with platform-specific thresholds (iOS: 20%, Android: 15%) |
src/hooks/usePowerState.ts |
Comprehensive power state including battery level, charging status, and low power mode |
src/hooks/useIsHeadphonesConnected.ts |
Monitors any headphone connection (wired or Bluetooth) with 1-second polling |
src/hooks/useIsWiredHeadphonesConnected.ts |
Detects wired headphone connections specifically |
src/hooks/useIsBluetoothHeadphonesConnected.ts |
Detects Bluetooth audio device connections |
src/hooks/useBrightness.ts |
Screen brightness monitoring (iOS only, returns -1 on Android) with 500ms polling |
src/hooks/utils.ts |
Utility functions for battery threshold logic |
src/hooks/index.ts |
Exports all hooks for convenient importing |
src/index.ts |
Re-exports hooks from main module entry point |
example/showcase/src/screens/HooksDemo.tsx |
New demo screen showcasing all 7 hooks with real-time updates and timestamps |
example/showcase/src/App.tsx |
Adds tab navigation to switch between properties view and hooks demo |
example/benchmark/src/benchmarks/hooks-benchmarks.ts |
Performance benchmarks for hook registration, cleanup, and callback latency |
example/benchmark/src/BenchmarkScreen.tsx |
Integrates hooks performance tests into benchmark UI |
docs/docs/guide/react-hooks.md |
Comprehensive usage guide with examples and best practices |
docs/docs/api/hooks.md |
Complete API reference with TypeScript signatures and platform support tables |
docs/docs/api/migration.md |
Updated migration guide with hooks comparison table |
docs/rspress.config.ts |
Adds hooks documentation to site navigation |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- useBrightness: skip polling on Android where brightness is unsupported - HooksDemo: fix stale closure in useTimestampedValue with functional update - useBatteryLevel: improve code pattern consistency with other hooks - BenchmarkScreen: fix HTML entity rendering in threshold text
l2hyunwoo
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 18 out of 18 changed files in this pull request and generated 12 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
l2hyunwoo
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 18 out of 18 changed files in this pull request and generated 8 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
l2hyunwoo
temporarily deployed
to
github-pages
GitHub Actions
Inactive
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Added
React Hooks: 7 new React hooks for real-time device state monitoring
useBatteryLevel(): Monitor battery level (0.0-1.0) with polling updatesuseBatteryLevelIsLow(): Detect low battery state (iOS: 20%, Android: 15% threshold)usePowerState(): Monitor comprehensive power state (level, charging, low power mode)useIsHeadphonesConnected(): Detect any headphone connectionuseIsWiredHeadphonesConnected(): Detect wired headphone connectionuseIsBluetoothHeadphonesConnected(): Detect Bluetooth audio connectionuseBrightness(): Monitor screen brightness (iOS only, returns -1 on Android)Example Apps: Enhanced showcase and benchmark apps
Documentation: Comprehensive hooks documentation
Screenshote