Sensors.md

Sensors

Sensors are render pros that track some behavior and re-render on state change.

For example, the below <div> will be re-rendered every time mouse position changes.

<MouseSensor>
  {({posX, posY}) => <div />}
</MouseSensor>

libreact comes with plenty of sensors built-in.

• <ActiveSensor> — tracks if element is being "pressed" on by mousedown.
• <BatterySensor> — tracks battery status.
• <ExitSensor> — notifies component when it is being un-mounted.
• <FocusSensor> — tracks element has focus.
• <GeoLocationSensor> — tracks device geographical location.
• <HoverSensor> — tracks element's hover status.
• <IdleSensor> — tracks is user is active on the page.
• <MediaDeviceSensor> — tracks media devices connected to your device.
• <MediaSensor> — tracks matches of a media query.
• <MotionSensor> — tracks physical motion of your device.
• <MouseSensor> — tracks mouse position inside an element.
• <NetworkSensor> — tracks network connectivity and type state.
• <LightSensor> — tracks physical lightning sensor state.
• <LocationSensor> — tracks browser location.
• <OrientationSensor> — tracks physical device orientation.
• <ScratchSensor> — tracks user "scratches" aka swipes.
• <ScrollSensor> — tracks scroll offsets in a DOM element.
• <SizeSensor> — tracks child DOM element size.
  • <WidthSensor> — same as <SizeSensor>, but only re-renders on width change.
• <ViewportSensor> — tracks elements visibility in viewport.
  • <ViewportScrollSensor> and <ViewportObserverSensor>
• <WindowScrollSensor> — tracks window scroll position.
• <WindowSizeSensor> — tracks window size.
  • <WindowWidthSensor> — tracks window width.

Most sensors have also corresponding HOC and class decorator that provide the same functionality. For example, <NetworkSensor> render prop component has a corresponding withNetowrk() HOC and @withNetwork decorator.