# useSettings

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

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

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

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

```

## 

### UseSettingsGeneratedType

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

#### Returns: Partial<Settings extends ExtensionSettings>
export function useSettings<
  Settings extends ExtensionSettings,
>(): Partial<Settings> {
  const settings = useSubscription(useApi().settings);

  return settings as Settings;
}


### ExtensionSettings

The merchant-defined setting values for the extension.

### [key: string]

value: `string | number | boolean | undefined`


## Related

- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Settings Definition](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#settings-definition)
- [Settings Examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-settings)

## Examples

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



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

```toml
api_version = "2023-07"

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

  [[extensions.targeting]]
  target = "purchase.checkout.block.render"
  module = "./Checkout.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

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



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

```toml
api_version = "2023-07"

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

  [[extensions.targeting]]
  target = "purchase.checkout.block.render"
  module = "./Checkout.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"

```