Store Hooks

Hooks for accessing Zustand stores and managing application state.

Use these hooks when a React component needs a reactive view of the headless Foundation stores: useAuth for session state, useTimezone for the selected IANA timezone, useNotifications for the unread count and useActions for the pending operator-action queue. Non-React code can read the corresponding Foundation store directly.

Core store hooks example

import {
  useActions,
  useAuth,
  useNotifications,
  useTimezone,
} from '@tetherto/mdk-react-adapter'

function ShellStatus() {
  const { token } = useAuth()
  const { timezone } = useTimezone()
  const { count } = useNotifications()
  const { pendingSubmissions } = useActions()

  return (
    <dl>
      <dt>Session</dt><dd>{token ? 'Active' : 'Signed out'}</dd>
      <dt>Timezone</dt><dd>{timezone}</dd>
      <dt>Unread</dt><dd>{count}</dd>
      <dt>Pending actions</dt><dd>{pendingSubmissions.length}</dd>
    </dl>
  )
}

@tetherto/mdk-react-adapter

Device store access

import { useDevices } from '@tetherto/mdk-react-adapter'

When to use `useDevices`

Use useDevices in React components that need the headless device inventory or current device selection. It is the React-bound view of devicesStore; code outside React should use the foundation store directly.

`useDevices` example

import { useDevices } from '@tetherto/mdk-react-adapter'

function DeviceToolbar() {
  const { selectedDevices, setSelectedDevices } = useDevices()

  return (
    <div>
      <p>Selected: {selectedDevices.length}</p>
      <button type="button" onClick={() => setSelectedDevices([])}>
        Clear selection
      </button>
    </div>
  )
}