jaredpalmer/react-fns
React Fns
react-fns is a suite of declarative components and utilities designed to wrap imperative browser APIs for use in React applications. It provides a set of components and higher-order components that integrate browser environment data, device sensors, network status, and native application launchers into a reactive user interface.
The library enables declarative access to hardware sensors for tracking accelerometer, gyroscope, and orientation data in real time. It also includes native app launchers that trigger the default system mail and SMS applications using pre-filled links.
Additional capabilities cover network status monitoring for online and offline connectivity, geolocation tracking for latitude and longitude, and user locale detection. The project also provides utilities for monitoring browser viewport dimensions and page scroll positions to trigger layout updates.
Features
- Browser API Wrappers - Provides a suite of declarative React components and higher-order components that wrap imperative browser APIs.
- Browser API Integrations - Provides declarative interfaces for accessing hardware and media capabilities directly through web platform APIs.
- Device Sensors - Integrates native hardware sensors for motion and orientation directly into the React reconciliation loop.
- Browser Sensor Monitoring - Provides hooks for tracking real-time data from web-accessible hardware sensors like accelerometers and gyroscopes.
- Imperative-to-Declarative Bridges - Provides an architectural bridge that maps imperative browser APIs to a declarative, state-driven React interface.
- Motion Data Streaming - Monitors accelerometer and gyroscope data in real time to detect physical movement and acceleration.
- Browser Geolocation Interfaces - Provides a declarative React component to track the device's global latitude and longitude coordinates.
- Device Orientation APIs - Provides interfaces for detecting the physical tilt and rotation of a device via native browser APIs.
- Network Connectivity Monitoring - Implements hooks and components to detect and monitor the online or offline status of the browser environment.
- Browser Location Retrievers - Retrieves geographic coordinates specifically through web browser location APIs and permission flows.
- Viewport Resize Observers - Monitors browser viewport dimensions and resize events to trigger responsive layout recalculations.
- Browser Connectivity State Tracking - Tracks the online and offline state of the device to adapt the application experience based on network availability.
- Browser Environment Detection - Provides utilities for identifying the user's locale, viewport dimensions, and browser environment.
- Event-Driven State Synchronizers - Synchronizes browser event listeners with React state to trigger UI re-renders based on external system changes.
- Higher-Order Components - Uses higher-order components to inject browser-level capabilities into functional components without altering their internal logic.
- Responsive Viewport Monitoring - Provides utilities for tracking window dimensions and media queries to adapt UI layouts dynamically.
- Scroll-Offset Tracking - Tracks the current scroll offset of the page to trigger reactive layout updates and UI changes.
- Viewport Dimension Tracking - Tracks browser viewport dimensions and scroll offsets to drive reactive layout updates.
- Event Listener Managers - Manages the registration and cleanup of browser event listeners tied to component mount and unmount cycles.
- Geolocation Services - The library retrieves current latitude and longitude coordinates using system location services to identify the device's global position.
- URI Scheme Launchers - Enables launching the default system mail and SMS applications with pre-filled recipient and subject data.
