State hooks

@tetherto/mdk-react-adapter

State hooks bind the framework-agnostic @tetherto/mdk-ui-core Zustand stores into React. Each hook subscribes the component to its store and re-renders only when the selected slice changes.

Use these when you want headless state with your own components. The Developer entry points table compares adoption layers.

Import

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

`useAuth`

@tetherto/mdk-react-adapter

React-bound view of the headless authStore. Exposes token and permissions; equivalent to useStore(authStore) with React subscription semantics.

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

Example

function SessionStatus() {
  const { token } = useAuth()

  if (!token) return <p>Sign in to continue</p>
  return <p>Active session</p>
}

`useDevices`

@tetherto/mdk-react-adapter

React-bound view of the headless devicesStore. Exposes the device list, the currently selected devices, and helpers to mutate selection.

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

Example

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

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

`useTimezone`

@tetherto/mdk-react-adapter

React-bound view of the headless timezoneStore. Read or update the operator's timezone preference (IANA identifier). Use useTimezoneFormatter when you also need date-formatting helpers.

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

Example

function TimezonePicker() {
  const { timezone, setTimezone } = useTimezone()
  return (
    <select value={timezone} onChange={(e) => setTimezone(e.target.value)}>
      <option value="UTC">UTC</option>
      <option value="America/New_York">America/New_York</option>
      <option value="Europe/London">Europe/London</option>
    </select>
  )
}

React-bound view of the headless notificationStore. Exposes the unread counter (count) plus increment, decrement, and reset. For the user-facing toast surface use useNotification from foundation.

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

Example

import { Badge } from '@tetherto/mdk-react-devkit/core'

function UnreadBadge() {
  const { count } = useNotifications()
  return <Badge count={count} />
}

`useActions`

@tetherto/mdk-react-adapter

React-bound view of the headless actionsStore. Exposes the pending operator submission queue plus helpers like setAddPendingSubmissionAction and removePendingSubmissionAction.

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

Example

function SubmissionTracker() {
  const { pendingSubmissions, setAddPendingSubmissionAction } = useActions()

  return (
    <div>
      <p>{pendingSubmissions.length} pending submissions</p>
      <Button onClick={() => setAddPendingSubmissionAction({ id: 'demo', kind: 'restart' })}>
        Queue restart
      </Button>
    </div>
  )
}

State hooks

Prerequisites

Import

`useAuth`

Example

`useDevices`

Example

`useTimezone`

Example

`useNotifications`

Example

`useActions`

Example

On this page