42c840f949
BREAKING: Dynamic variables inside dynamic content are problematic for tools that use static analysis, therefore we have removed it, but you can still add it back on your extension if it works for you. The change may break your extension if you relied on this logic, you can add it back yourself by overriding the static get localizeNamespaces(). Example can be found here: https://github.com/ing-bank/lion/blob/%40lion/localize%400.8.10/packages/localize/stories/50-system-overview.stories.mdx#rendering-with-localizemixin
50 lines
996 B
Markdown
50 lines
996 B
Markdown
# Localize
|
|
|
|
[//]: # 'AUTO INSERT HEADER PREPUBLISH'
|
|
|
|
The localization system helps to manage localization data split into locales and automate its loading.
|
|
|
|
## Live Demo/Documentation
|
|
|
|
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/localize--page) for a live demo and documentation
|
|
|
|
## How to use
|
|
|
|
### Installation
|
|
|
|
```sh
|
|
npm i --save @lion/localize
|
|
```
|
|
|
|
```js
|
|
import { localize } from '@lion/localize';
|
|
```
|
|
|
|
### Example
|
|
|
|
Translation data:
|
|
|
|
```js
|
|
// path/to/hello-world/translations/en-GB.js
|
|
export default { greeting: 'Hello {name}!', };`
|
|
```
|
|
|
|
Loading translations:
|
|
|
|
```js
|
|
// path/to/hello-world/HelloWorld.js
|
|
localize.loadNamespace({
|
|
'hello-world': locale => {
|
|
return import(`./translations/${locale}.js`);
|
|
},
|
|
});
|
|
```
|
|
|
|
> Note: dynamic variables inside dynamic imports may cause problems with tools that do static analysis, and may not work out of the box
|
|
|
|
Translating messages:
|
|
|
|
```js
|
|
localize.msg('hello-world:greeting', { name: 'John' });
|
|
// Hello John!
|
|
```
|