# Settings

The API for interacting with merchant settings.

```jsx
import {
  reactExtension,
  Banner,
  useSettings,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.order-status.block.render',
  () => <Extension />,
);

function Extension() {
  const {banner_title} = useSettings();
  return <Banner title={banner_title} />;
}

```

```js
import {
  extension,
  Banner,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-status.block.render',
  (root, {settings}) => {
    const banner = root.createComponent(Banner, {
      title: settings.current.banner_title,
    });

    // When the merchant updates the banner title in the checkout editor, re-render the banner
    settings.subscribe((newSettings) => {
      banner.updateProps({
        title: newSettings.banner_title,
      });
    });

    root.appendChild(banner);
  },
);

```

## StandardApi

The base API object provided to this and other `customer-account` extension targets.

### Docs_Standard_SettingsApi

### settings

value: `StatefulRemoteSubscribable<ExtensionSettings>`

  - ExtensionSettings: export interface ExtensionSettings {
  [key: string]: string | number | boolean | undefined;
}
The settings matching the settings definition written in the [`shopify.ui.extension.toml`](https://shopify.dev/docs/api/customer-account-ui-extensions/configuration) file.

 See [settings examples](https://shopify.dev/docs/api/customer-account-ui-extensions/apis/order-status-api/settings#examples) for more information.

> Note: When an extension is being installed in the editor, the settings will be empty until a merchant sets a value. In that case, this object will be updated in real time as a merchant fills in the settings.

### ExtensionSettings

The merchant-defined setting values for the extension.

### [key: string]

value: `string | number | boolean | undefined`


## Examples

The API for interacting with merchant settings.


You can define settings that merchants can edit within the checkout editor. See [settings](https://shopify.dev/docs/api/customer-account-ui-extensions/configuration#settings-definition) for more information on how to define these.

```toml
api_version = "unstable"

[[extensions]]
name = "My customer account ui extension"
handle = "customer-account-ui"
type = "ui_extension"

  [[extensions.targeting]]
  target = "customer-account.order-status.block.render"
  module = "./Extension.jsx"

  [extensions.settings]
    [[extensions.settings.fields]]
    key = "banner_title"
    type = "single_line_text_field"
    name = "Banner title"
    description = "Enter a title for the banner."
    [[extensions.settings.fields.validations]]
    name = "min"
    value = "5"
    [[extensions.settings.fields.validations]]
    name = "max"
    value = "20"

```

## useSettings

Returns the setting values defined by the merchant for the extension.

### UseSettingsGeneratedType

Returns the setting values defined by the merchant for the extension.

#### Returns: Partial<Settings extends ExtensionSettings>
export function useSettings<
  Settings extends ExtensionSettings,
  Target extends RenderOrderStatusExtensionTarget = RenderOrderStatusExtensionTarget,
>(): Partial<Settings> {
  const api = useApi<Target>();
  const extensionTarget = api.extension.target;

  if (!('settings' in api)) {
    throw new ExtensionHasNoFieldError('settings', extensionTarget);
  }

  const settings = useSubscription(api.settings);

  return settings as Settings;
}


### ExtensionSettings

The merchant-defined setting values for the extension.

### [key: string]

value: `string | number | boolean | undefined`


## Examples

The API for interacting with merchant settings.


You can define settings that merchants can edit within the checkout editor. See [settings](https://shopify.dev/docs/api/customer-account-ui-extensions/configuration#settings-definition) for more information on how to define these.

```toml
api_version = "unstable"

[[extensions]]
name = "My customer account ui extension"
handle = "customer-account-ui"
type = "ui_extension"

  [[extensions.targeting]]
  target = "customer-account.order-status.block.render"
  module = "./Extension.jsx"

  [extensions.settings]
    [[extensions.settings.fields]]
    key = "banner_title"
    type = "single_line_text_field"
    name = "Banner title"
    description = "Enter a title for the banner."
    [[extensions.settings.fields.validations]]
    name = "min"
    value = "5"
    [[extensions.settings.fields.validations]]
    name = "max"
    value = "20"

```

## Examples

The API for interacting with merchant settings.


You can define settings that merchants can edit within the checkout editor. See [settings](https://shopify.dev/docs/api/customer-account-ui-extensions/configuration#settings-definition) for more information on how to define these.

```toml
api_version = "unstable"

[[extensions]]
name = "My customer account ui extension"
handle = "customer-account-ui"
type = "ui_extension"

  [[extensions.targeting]]
  target = "customer-account.order-status.block.render"
  module = "./Extension.jsx"

  [extensions.settings]
    [[extensions.settings.fields]]
    key = "banner_title"
    type = "single_line_text_field"
    name = "Banner title"
    description = "Enter a title for the banner."
    [[extensions.settings.fields.validations]]
    name = "min"
    value = "5"
    [[extensions.settings.fields.validations]]
    name = "max"
    value = "20"

```