# salla-localization-modal (https://docs.salla.dev/twilight/react/web-components/salla-localization-modal)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

A modal that lets the customer pick the store language and currency. Place one instance in the theme (usually the
header or footer). It opens when the `localization::open` event fires (and, outside native mobile apps, on
`currency::open` and `language::open`), when `open()` is called, or from its own trigger button when `show-trigger` is set.
A language or currency list is only shown if the store offers more than one choice; the modal closes itself if
there is nothing to choose. Lists with fewer than 6 entries render as radio buttons, longer lists as a `<select>`.
Confirming sets the `s-lang` and `s-curr` cookies, changes the currency through the API and reloads the page
with the chosen language.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-localization-modal>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaLocalizationModal } from '@salla.sa/twilight-components-react/localization-modal';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

```tsx
import { SallaLocalizationModal } from '@salla.sa/twilight-components-react/localization-modal';

export function Example() {
  return (
    <SallaLocalizationModal showTrigger />
  );
}
```

```html
<salla-localization-modal show-trigger></salla-localization-modal>
```

```tsx
import { SallaLocalizationModal } from '@salla.sa/twilight-components-react/localization-modal';

export function Example() {
  return (
    <SallaLocalizationModal>
      <div slot="language"><label htmlFor="lang-{code}">{'{'}name{'}'}</label></div>
      <div slot="currency"><label htmlFor="currency-{code}">{'{'}name{'}'} {'{'}symbol{'}'}</label></div>
    </SallaLocalizationModal>
  );
}
```

```html
<salla-localization-modal>
  <div slot="language"><label for="lang-{code}">{name}</label></div>
  <div slot="currency"><label for="currency-{code}">{name} {symbol}</label></div>
</salla-localization-modal>
```

## Properties [#properties]

| Property      | Attribute      | Description                                                                                                                                          | Type      | Default |
| ------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `currency`    | `currency`     | Current currency code (for example `SAR`, `USD`). Defaults to the currency of the current user; it is updated when the customer selects another one. | `string`  |         |
| `language`    | `language`     | Current language code (for example `ar`, `en`). Defaults to the language of the current user; it is updated when the customer selects another one.   | `string`  |         |
| `showTrigger` | `show-trigger` | When true, renders a button showing the current language name and currency symbol that opens the modal when clicked.                                 | `boolean` | `false` |

## Methods [#methods]

Call these on the element or a React ref.

### `close() => Promise<HTMLElement>` [#close--promisehtmlelement]

Closes the modal.

Returns `Promise<HTMLElement>`: A Promise that resolves when the modal has closed.

### `open() => Promise<any>` [#open--promiseany]

Opens the modal, loads the available languages and currencies, and closes it again if there is nothing to choose between.

Returns `Promise<any>`: A Promise that resolves when loading has finished.

### `submit() => Promise<void>` [#submit--promisevoid]

Applies the selected currency and language: changes the currency through the API, stores the `s-lang` and
`s-curr` cookies, closes the modal and navigates to the same page with the chosen language.

## Slots [#slots]

| Slot       | Description                                                                                                                                                                     |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `currency` | Template for each currency radio label (read once when the component is created, only used for the radio list). Placeholders: `{name}`, `{code}`, `{symbol}`, `{country_code}`. |
| `language` | Template for each language radio label (read once when the component is created, only used for the radio list). Placeholders: `{name}`, `{code}`, `{country_code}`.             |

## Related [#related]

Renders: [`<salla-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-modal), [`<salla-skeleton>`](https://docs.salla.dev/twilight/react/web-components/salla-skeleton), [`<salla-placeholder>`](https://docs.salla.dev/twilight/react/web-components/salla-placeholder), [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button).