Settings.useSettings()

Settings.useSettings() provides real-time access to your app’s workspace settings in React components. It automatically subscribes to settings updates, so your components will always reflect the current configuration.

import {Settings} from "attio/client"

Parameters

WorkspaceSettingsSchema

required

The schema built with Settings.defineWorkspaceSchema, imported from your schema file.

Returns

An object containing all workspace settings values, fully typed based on your schema definition. Every value is null until it has been set.

Example

src/app/extensions/sync-status/extension.tsx

import React from "react"
import {Extensions, Settings, Widget} from "attio/client"

import schema from "../../settings/schema"

export default Extensions.defineExtension({
  type: "record-widget",
  id: "sync-status",
  label: "Sync Status",
  Widget: () => {
    const settings = Settings.useSettings(schema)

    // Access settings values with full type safety.
    // This automatically updates when settings change.
    if (!settings.auto_sync_enabled) {
      return (
        <Widget.TextWidget>
          <Widget.Title>Sync Disabled</Widget.Title>
          <Widget.Text.Primary>Enable auto-sync in workspace settings</Widget.Text.Primary>
        </Widget.TextWidget>
      )
    }

    return (
      <Widget.TextWidget>
        <Widget.Title>Sync Active</Widget.Title>
        <Widget.Text.Primary>
          Syncing every {settings.sync_interval_minutes} minutes
        </Widget.Text.Primary>
      </Widget.TextWidget>
    )
  },
})

Type safety

The hook’s return type is automatically inferred from your schema:

src/app/settings/schema.ts

import {Settings} from "attio"

export default Settings.defineWorkspaceSchema({
  team_name: Settings.Schema.string(),
  auto_sync_enabled: Settings.Schema.boolean(),
  sync_interval_minutes: Settings.Schema.number(),
})

// TypeScript knows the exact shape of settings
const settings = Settings.useSettings(schema)

settings.team_name // string | null
settings.auto_sync_enabled // boolean | null
settings.sync_interval_minutes // number | null
settings.nonexistent // TypeScript error!

Settings.getSettings() - Read settings outside React rendering
Settings.useForm() - Build the settings page form

Settings.useForm()Settings.getSettings()

⌘I

Introduction

Guides

Extensions

Workflow blocks

Notifications

Dialogs

Components

Forms

Icons

Settings

GraphQL

Data fetching

Server

System

Legacy

Settings.useSettings()

Parameters

Returns

Example

Type safety

​Parameters

​Returns

​Example

​Type safety

​Related

Parameters

Returns

Example

Type safety

Related