storybook-addon-intl

KO | EN

gitlite — search

#php #python #redux #android #javascript #bootstrap #nodejs #css #angular #docker #template #react

storybook-addon-intl

★ 86 Open GitHub ↗

Addon to provide a locale switcher and react-intl for storybook

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Storybook Addon Intl

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

![](https://raw.githubusercontent.com/truffls/storybook-addon-intl/master/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)

storybook-addon-intl

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README