Binary Sensor

Monitor binary sensors like door/window sensors, motion detectors, smoke alarms, and more.

Quick Example

// Component approach
<BinarySensor entityId="binary_sensor.front_door">
  {({ isOn, isOff, deviceClass }) => (
    <div>
      Front Door: {isOn ? 'OPEN' : 'CLOSED'}
    </div>
  )}
</BinarySensor>

// Hook approach
const doorSensor = useBinarySensor('binary_sensor.front_door')
<div>
  {doorSensor.attributes.friendly_name}: {doorSensor.isOn ? 'OPEN' : 'CLOSED'}
</div>

Component API

Basic Usage

import { BinarySensor } from 'hass-react'

<BinarySensor entityId="binary_sensor.front_door">
  {(sensorProps) => (
    // Your UI here
  )}
</BinarySensor>

Render Props

The BinarySensor component provides these props to your render function:

State Properties

• isOn (boolean) - Whether the sensor is in the "on" state (triggered)
• isOff (boolean) - Whether the sensor is in the "off" state (not triggered)
• deviceClass (string | undefined) - Device class (door, motion, smoke, etc.)
• icon (string | undefined) - Icon for the sensor

Entity Properties

• entityId (string) - The entity ID
• state (string) - Raw state value from Home Assistant
• attributes (object) - All entity attributes
• lastChanged (Date) - When the entity last changed
• lastUpdated (Date) - When the entity was last updated

Hook API

Basic Usage

import { useBinarySensor } from 'hass-react'

function MyComponent() {
  const sensor = useBinarySensor('binary_sensor.front_door')
  
  // All the same properties as component render props
  return <div>{sensor.isOn ? 'TRIGGERED' : 'CLEAR'}</div>
}

The useBinarySensor hook returns an object with all the same properties and methods as the component's render props.

List All Binary Sensors

Use the useBinarySensors hook to retrieve all available binary sensor entities:

import { useBinarySensors } from 'hass-react'

function BinarySensorList() {
  const binarySensors = useBinarySensors()

  return (
    <div>
      <h2>Available Binary Sensors ({binarySensors.length})</h2>
      {binarySensors.map(sensor => (
        <div key={sensor.entity_id}>
          {sensor.attributes.friendly_name || sensor.entity_id}
        </div>
      ))}
    </div>
  )
}

The useBinarySensors hook fetches all binary sensor entities from Home Assistant and returns an array of binary sensor objects.

Examples

Door Sensor

<BinarySensor entityId="binary_sensor.front_door">
  {({ isOn, deviceClass, attributes, lastChanged }) => (
    <div>
      <h3>{attributes.friendly_name}</h3>
      <p>Status: {isOn ? 'OPEN' : 'CLOSED'}</p>
      <p>Device Class: {deviceClass}</p>
      <p>Last Changed: {lastChanged.toLocaleString()}</p>
    </div>
  )}
</BinarySensor>

Motion Sensor

<BinarySensor entityId="binary_sensor.living_room_motion">
  {({ isOn, attributes, lastChanged }) => {
    const secondsAgo = Math.floor((Date.now() - lastChanged.getTime()) / 1000)
    
    return (
      <div>
        <h3>{attributes.friendly_name}</h3>
        <p>Motion: {isOn ? 'DETECTED' : 'NONE'}</p>
        {isOn && <p>Detected {secondsAgo} seconds ago</p>}
      </div>
    )
  }}
</BinarySensor>

Smoke/Fire Alarm

<BinarySensor entityId="binary_sensor.smoke_detector">
  {({ isOn, deviceClass, attributes }) => (
    <div>
      <h3>{attributes.friendly_name}</h3>
      <p>Status: {isOn ? 'ALARM TRIGGERED' : 'ALL CLEAR'}</p>
      <p>Device Class: {deviceClass}</p>
      {isOn && <p style={{ color: 'red' }}>IMMEDIATE ATTENTION REQUIRED</p>}
    </div>
  )}
</BinarySensor>

Multiple Sensors

function SecurityPanel() {
  const sensors = [
    'binary_sensor.front_door',
    'binary_sensor.back_door', 
    'binary_sensor.living_room_motion',
    'binary_sensor.smoke_detector'
  ]
  
  return (
    <div>
      <h2>Security System Status</h2>
      {sensors.map(entityId => (
        <BinarySensor key={entityId} entityId={entityId}>
          {({ isOn, deviceClass, attributes }) => (
            <div>
              <strong>{attributes.friendly_name}</strong>: {isOn ? 'TRIGGERED' : 'SECURE'}
              <br />
              Type: {deviceClass}
            </div>
          )}
        </BinarySensor>
      ))}
    </div>
  )
}

Water Leak Sensor

<BinarySensor entityId="binary_sensor.basement_water_leak">
  {({ isOn, attributes }) => (
    <div>
      <h3>{attributes.friendly_name}</h3>
      <p>Status: {isOn ? 'WATER DETECTED' : 'DRY'}</p>
      {isOn && <p style={{ color: 'red' }}>Check for water damage immediately!</p>}
    </div>
  )}
</BinarySensor>

Conditional Display

<BinarySensor entityId="binary_sensor.garage_door">
  {({ isOn, attributes }) => (
    <div>
      <span>{attributes.friendly_name}: {isOn ? 'Open' : 'Closed'}</span>
      {isOn && <span style={{ color: 'orange' }}> - Action Required</span>}
    </div>
  )}
</BinarySensor>

Using Hooks

import { useBinarySensor } from 'hass-react'

function BinarySensorCard({ entityId }) {
  const sensor = useBinarySensor(entityId)
  
  const getStatusText = (deviceClass: string | undefined, isOn: boolean) => {
    switch (deviceClass) {
      case 'door':
      case 'window':
        return isOn ? 'OPEN' : 'CLOSED'
      case 'motion':
      case 'occupancy':
        return isOn ? 'DETECTED' : 'CLEAR'
      case 'smoke':
      case 'safety':
        return isOn ? 'ALARM' : 'SAFE'
      case 'moisture':
        return isOn ? 'WET' : 'DRY'
      default:
        return isOn ? 'ON' : 'OFF'
    }
  }
  
  return (
    <div>
      <h3>{sensor.attributes.friendly_name}</h3>
      <p>Status: {getStatusText(sensor.deviceClass, sensor.isOn)}</p>
      <p>Device Class: {sensor.deviceClass}</p>
      <p>Last Changed: {sensor.lastChanged.toLocaleTimeString()}</p>
    </div>
  )
}