Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-addon-intl
Addon to provide locale switcher and react-intl for storybook
npm install storybook-addon-intl
Last updated 2 days ago
12.9k
Downloads per week
Readme View on GitHub

Storybook Addon Intl

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

Getting Started

First, install the addon

npm install -D storybook-addon-intl

Then, add following content to .storybook/main.js:

export default {
    addons: ['storybook-addon-intl']
};

In .storybook/preview.js, add the following:

// 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 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 of react-intl)

defaultRichTextElements

Type: object

Object of rich text elements.

(See defaultRichTextElements in IntlProvider docs of react-intl)

Join the community
6,586 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI