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 (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-04-16T13:15:26.000Z (10 months ago)
• Last Synced: 2024-09-19T23:43:10.378Z (5 months ago)
• Topics: i18n, l10n, react-intl, storybook, storybook-addon
• Language: TypeScript
• Homepage:
• Size: 525 KB
• Stars: 86
• Watchers: 4
• Forks: 20
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Storybook Addon Intl

The Intl addon can be used to provide locale switcher and react-intl.

![](docs/screenshot.png)

## 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)