MDK Logo

Hooks

React hooks for state management, data fetching, and UI interactions

React hooks from @tetherto/mdk-react-devkit and @tetherto/mdk-react-adapter for building mining application UIs.

Prerequisites

  • Install the packages
npm install \
  @tetherto/mdk-react-devkit \
  @tetherto/mdk-react-adapter \
  @tetherto/mdk-ui-foundation

Install zod@^4.6.6 first. @tetherto/mdk-react-devkit@0.12.1 declares zod@^4.6.6 as a peer while its @hookform/resolvers peer pulls a chain that pins zod 3, so the command above aborts with ERESOLVE in a project that has no zod. Installing zod 4 at the project root resolves it:

npm install zod@^4.6.6

Browse by category

Data & state hooks

CategoryDescriptionPackage
AppsInstalled app panel and UI discovery hooksreact-adapter
AuthAuthentication state hooksreact-adapter
DashboardDashboard data and state hooksreact-adapter
PermissionPermission and access control hooksreact-adapter
StoreZustand store access hooksreact-adapter

UI component hooks

CategoryDescriptionPackage
ChartsChart component hooksreact-devkit
DeviceDevice and equipment management hooksreact-adapter
FeedbackToast and notification hooksreact-devkit
FiltersFilter state hooksreact-devkit
FormsForm state and validation hooksreact-devkit
NavigationNavigation state hooksreact-devkit
SettingsSettings and preferences hooksreact-devkit
WidgetsWidget state hooksreact-devkit

Feature hooks

CategoryDescriptionPackage
AlertsAlert management hooksreact-adapter
Op CenterOperations center hooksreact-adapter

Utility hooks

CategoryDescriptionPackage
ExampleExample and demo hooksreact-adapter
UtilityGeneral utility hooksreact-adapter

Import pattern

// From react-adapter (state/data hooks)
import { useAuth, useDevices } from '@tetherto/mdk-react-adapter'

// From react-devkit (UI component hooks)
import { useChartDataCheck, useTimeframeControls } from '@tetherto/mdk-react-devkit'

On this page