---
parts:
  - Overview
  - Localize
  - Systems
title: 'Localize: Overview'
eleventyNavigation:
  key: Systems >> Localize >> Overview
  title: Overview
  order: 10
  parent: Systems >> Localize
---

# Localize: Overview

Is meant to translate text into multiple languages.
In it's simplest form it is a function that returns the translated text for a namespace + key.

## Features

- Uses es modules
- Formatting of numbers, amounts
- Formatting of dates

Further examples and a more in depth description can be found at the [Use Cases Page](https://github.com/ing-bank/lion/blob/57099bec108436e2c9270e4d5cefc5b05c092050/docs/fundamentals/systems/localize/use-cases.md).

## Content

| Feature                                  | Description                                   |
| ---------------------------------------- | --------------------------------------------- |
| [Translate Text](https://github.com/ing-bank/lion/blob/57099bec108436e2c9270e4d5cefc5b05c092050/docs/fundamentals/systems/localize/text.md)    | Load and translate text in multiple languages |
| [Format Numbers](https://github.com/ing-bank/lion/blob/57099bec108436e2c9270e4d5cefc5b05c092050/docs/fundamentals/systems/localize/numbers.md) | Format numbers in multiple languages          |
| [Format Dates](https://github.com/ing-bank/lion/blob/57099bec108436e2c9270e4d5cefc5b05c092050/docs/fundamentals/systems/localize/dates.md)     | Format dates in multiple languages            |

## Installation

```bash
npm i --save @lion/ui
```

```js
import { localize } from '@lion/ui/localize.js';
```

### Example

The locale which will be loaded by default is accessed via the `localize.locale`.

The single source of truth for page's locale is `<html lang="my-LOCALE">`.
At the same time the interaction should happen via `localize.locale` getter/setter to be able to notify and react to the change.

```js
import { localize } from '@lion/ui/localize.js';

localize.addEventListener('localeChanged', () => {
  // do smth when data is loaded for a new locale
});

// changes locale, syncs to `<html lang="es-ES">` and fires the event above
localize.locale = 'es-ES';
```
