npm package: @meza/storybook-react-i18next
Description: Add react-i18next support to Storybook
Author: Steven Sacks
Latest version: 1.1.12

# Storybook react-i18next addon

Easy react-i18next Storybook integration.

Required Peer Dependencies:

-   storybook - `>=6.5.0`
-   i18next - `>=21.0.0`
-   i18next-browser-languagedetector - `^6.1.4`
-   i18next-http-backend: `^1.4.0`
-   react-i18next - `>=11.17.0`

This Storybook addon assumes your project is already set up with [i18next](https://www.i18next.com/overview/getting-started) and [react-i18next](https://react.i18next.com/getting-started), with all the required packages installed, and that it is properly configured and working.

## Installation

Install this addon as a dev dependency.

```bash
npm i -D storybook-react-i18next
```

```bash
yarn add -D storybook-react-i18next
```

You will need to install `i18next` and `react-i18next` as dependencies to your project if they are not already installed.

```bash
npm i -S i18next react-i18next i18next-browser-languagedetector i18next-http-backend
```

```bash
yarn add i18next react-i18next i18next-browser-languagedetector i18next-http-backend
```

## Usage

After installing, follow these 3 steps to enable this addon in Storybook.

### main.js

Insert this addon into your addons array:

```javascript
{
    addons: [
        // other addons...
        'storybook-react-i18next',
    ];
}
```

---

### i18next.js

Create a file in your `.storybook` folder called `i18next.js` (or whatever you like).

In this file, copy and paste the below code and make whatever modifications you need (paths to resource files, languages, etc.).

```javascript
import {initReactI18next} from 'react-i18next';
import i18n from 'i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

const ns = ['common'];
const supportedLngs = ['en', 'fr', 'ja'];
const resources = ns.reduce((acc, n) => {
    supportedLngs.forEach((lng) => {
        if (!acc[lng]) acc[lng] = {};
        acc[lng] = {
            ...acc[lng],
            [n]: require(`../public/locales/${lng}/${n}.json`),
        };
    });
    return acc;
}, {});

i18n.use(initReactI18next)
    .use(LanguageDetector)
    .use(Backend)
    .init({
        //debug: true,
        lng: 'en',
        fallbackLng: 'en',
        defaultNS: 'common',
        ns,
        interpolation: {escapeValue: false},
        react: {useSuspense: false},
        supportedLngs,
        resources,
    });

export default i18n;
```

Refer to the [i18next Configuration Options](https://www.i18next.com/overview/configuration-options) documentation for detailed information about the configuration options.

---

### preview.js

In your `preview.js`, you need to add the `locales` and `locale` parameters, as well as the `i18n` that you exported from the above file.

`locales` is an object where the keys are the "ids" of the locales/languages and the values are the names you want to display in the dropdown.

`locale` is what you want the default locale to be.

```javascript
import i18n from './i18next.js';

export const parameters = {
    i18n,
    locale: 'en',
    locales: {
        en: 'English',
        fr: 'Français',
        ja: '日本語',
    },
};
```

You can also use full locale strings as keys. It depends on your i18next configuration.

```javascript
import i18n from './i18next.js';

export const parameters = {
    i18n,
    locale: 'en_US',
    locales: {
        en_US: 'English (US)',
        en_GB: 'English (GB)',
        fr_FR: 'Français',
        ja_JP: '日本語',
    },
};
```

The `locales` object can also have values as an object with keys of `title`, `left`, or `right`.

This is useful if you want to include an emoji flag or some other string to the left or right side.

For example:

```javascript
import i18n from './i18next.js';

export const parameters = {
    i18n,
    locale: 'en',
    locales: {
        en: {title: 'English', left: '🇺🇸'},
        fr: {title: 'Français', left: '🇫🇷'},
        ja: {title: '日本語', left: '🇯🇵'},
    },
};
```

Or something like this:

```javascript
import i18n from './i18next.js';

export const parameters = {
    i18n,
    locale: 'en_US',
    locales: {
        en_US: {title: 'English', right: 'US'},
        en_GB: {title: 'English', right: 'GB'},
        fr_FR: {title: 'Français', right: 'FR'},
        ja_JP: {title: '日本語', right: 'JP'},
    },
};
```

---

Once you have finished these steps and launch storybook, you should see a globe icon in the toolbar.

Clicking this globe icon will show a dropdown with the locales you defined in `parameters`.

Switching locales will use the strings defined in your locale json files.