Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/truffls/storybook-addon-intl
Addon to provide a locale switcher and react-intl for storybook
https://github.com/truffls/storybook-addon-intl
i18n l10n react-intl storybook storybook-addon
Last synced: 3 months ago
JSON representation
Addon to provide a locale switcher and react-intl for storybook
- Host: GitHub
- URL: https://github.com/truffls/storybook-addon-intl
- Owner: truffls
- License: mit
- Created: 2017-05-23T16:10:14.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-07-31T10:40:45.000Z (11 months ago)
- Last Synced: 2024-03-22T23:22:38.784Z (3 months ago)
- Topics: i18n, l10n, react-intl, storybook, storybook-addon
- Language: JavaScript
- Homepage:
- Size: 1.14 MB
- Stars: 86
- Watchers: 4
- Forks: 20
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Lists
- awesome-test - Intl
README
# Storybook Addon Intl
The Intl addon can be used to provide locale switcher and react-intl.
## Getting Started
First, install the addon
```shell
npm install -D storybook-addon-intl
```
Then, add following content to `.storybook/main.js`:
```js
export default {
addons: ['storybook-addon-intl']
};
```
In `.storybook/preview.js`, add the following:
```js
// Provide your messages
const messages = {
en: { message: 'Just some text.' },
de: { message: 'Nur etwas Text.' },
es: { message: 'Sólo un texto.' }
};
const getMessages = (locale) => messages[locale];
export default {
parameters: {
intl: {
locales: defaultLocales,
defaultLocale: 'en',
getMessages
}
}
};
```
## Configuration
Parameter key: `intl`
### `locales`
Type: `string[]`
Available locales.
### `defaultLocale`
Type: `string`
Fallback locale.
### `getMessages`
Type: `(locale: string) => object`
Getter function that takes the active locale as arguments and expects an `object` of messages as a return value.
(See `messages` in [`IntlProvider` docs](https://formatjs.io/docs/react-intl/components#intlprovider) of react-intl)
### `getFormats`
Type: `(locale: string) => object`
Getter function that takes the active locale as arguments and expects an `object` of formats as a return value.
(See `formats` in [`IntlProvider` docs](https://formatjs.io/docs/react-intl/components#intlprovider) of react-intl)
### `defaultRichTextElements`
Type: `object`
Object of rich text elements.
(See `defaultRichTextElements` in [`IntlProvider` docs](https://formatjs.io/docs/react-intl/components#intlprovider) of react-intl)