Settings Hooks

Hooks for managing user settings and preferences.

Package

@tetherto/mdk-react-devkit

Hooks

@tetherto/mdk-react-devkit

Header controls

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

useNotification

When to use `useHeaderControls`

Use useHeaderControls in settings UI that reads or changes the shared header item preferences. It exposes the current preferences together with focused toggle and reset handlers.

`useHeaderControls` notification behaviour

handleToggle and handleReset show a success notification. Avoid calling either handler from rapidly changing state or an effect that can repeat, because each invocation creates another toast.

`useHeaderControls` example

import { Button, useHeaderControls } from '@tetherto/mdk-react-devkit'

function HeaderSettings() {
  const { preferences, handleToggle, handleReset } = useHeaderControls()

  return (
    <div>
      {Object.entries(preferences).map(([key, visible]) => (
        <label key={key}>
          <input
            type="checkbox"
            checked={visible}
            onChange={(event) => handleToggle(key, event.target.checked)}
          />
          {key}
        </label>
      ))}
      <Button onClick={handleReset}>Reset to default</Button>
    </div>
  )
}

@tetherto/mdk-react-devkit

`useHeaderControls`

Read/write hook for the global header-controls store (toggles, sticky flag, theme).

() => { preferences: HeaderPreferences; isLoading: boolean; error: null; handleToggle: (key: keyof HeaderPreferences, value: boolean) => void; handleReset: () => void; }

Settings Hooks

On this page