New
Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic
Star80,490
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon

Integrate React i18next and Storybook

React i18next is an internationalization library for localizing applications. This recipe shows you how to get the most out of React i18next in Storybook.

Do it for me automatically

The quickest way to integrate Storybook and React i18next is to use an addon. Addons are reusable packages that automatically configure integrations. Check out the React i18next addons below. If you’re looking to integrate React i18next manually, jump to the recipe.

Storybook i18next Addon
Add i18next support to Storybook
1.4k
Downloads
Storybook react-i18next addon
Add react-i18next support to Storybook
98.1k
Downloads

How to setup React i18next and Storybook

Most developers use i18next, a popular JavaScript library that lets apps define separate files for each supported locale. It detects a user’s language preferences and region, and only loads the detected locale.

Instead of being passed to components as inputs, the locale is shared globally through context. Let’s use i18next to extend Storybook with a locale switcher in the toolbar to choose which locale is shared with your components.

Follow along using the code examples in the react-i18next GitHub repository.

Switching locale between English, German, and Arabic in Storybook

Prerequisites

Before we begin, ensure that you have a working React app using react-i18next which is set up with Storybook 6.0 or newer. If you need resources to set these up, I’ve included some recommendations below:

Or if you'd prefer a video, check out Chantastic's awesome video on adding i18next to your React app.

1. Expose i18next to Storybook

To make your translations available in your stories, you’ll first need to expose your i18next instance to Storybook. Here’s an example of an i18next instance from the ./src/i18n.js file being used in my React app.

To expose this instance to Storybook, we can import it into the ./.storybook/preview.js file where Storybook holds its shared story configurations.

2. Wrap your stories with the i18next provider

Now that Storybook has access to i18next, we need to share that with our stories. To do that we’re going to make a decorator to wrap our stories in.

Sweet! Our stories officially have access to our translations. If we change the lng defined in ./src/i18n.js you’ll see your stories reload in the new language.

Manually changing the locale from English to French

3. Add a locale switcher

Hardcoding your locale is annoying and won’t be helpful to anyone viewing your deployed Storybook, so let’s add a locale switcher to the Storybook toolbar. If you want to learn more about switchers, check out Yann Braga’s article on adding a theme switcher.

To do this, we can declare a global variable named locale in .storybook/preview.js and assign it to a list of supported languages to choose from.

Looking back at Storybook, we can now see that we have a “Locale” switcher added to the toolbar with the options we just set.

The locale switcher in the Storybook toolbar

Now let’s update our decorator to change our locale when we select a new language.

Voila— a fully functioning locale switcher for your stories powered by react-i18next!

Switching between English and German using the locale switcher

4. Set document direction

Some languages are not read from left to right like English is. Arabic, for example, is read from right to left. HTML has built-in support for this with the dir attribute.

First of all, let's add Arabic as an option in our locale switcher by adding an object into the items array of our globalTypes.

Using i18next’s dir(lng) function and languageChanged event, we can set the document direction for the selected locale.

Now when we set our storybook to Arabic, the document direction gets set to ”rtl” 🎉

Switching between English, German, and Arabic with the locale switcher

Join the community
6,324 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI