i18next

A powerful internationalization framework for Effector which is based on i18next.

Installation

First, you need to install integration and its peer dependency:

pnpm

pnpm install @withease/i18next i18next

yarn

yarn add @withease/i18next i18next

npm

npm install @withease/i18next i18next

Initialization

All you need to do is to create an integration by calling createI18nextIntegration with an integration options:

• instance: an instance of i18next in various forms.
• setup: after this Event all listeners will be installed, and the integration will be ready to use; it is required because it is better to use explicit initialization Event in the application.
• teardown?: after this Event all listeners will be removed, and the integration will be ready to be destroyed.

Use replaceable static i18next instance

In the simplest case, you can pass an i18next instance to the integration.

import i18next from 'i18next';
import { createStore, createEvent, fork, allSettled } from 'effector';
import { createI18nextIntegration } from '@withease/i18next';

// Event that should be called after application initialization
const appStarted = createEvent();

// Create Store for i18next instance
const $i18nextInstance = createStore(i18next.createInstance(/* ... */), {
  serialize: 'ignore',
});

const integration = createI18nextIntegration({
  // Pass Store with i18next instance to the integration
  instance: $i18nextInstance,
  setup: appStarted,
});

// You can replace $someInstance later during runtime
// e.g., during fork on client or server

Use replaceable asynchronous i18next instance since v23.2.0

Sometimes you need to create an instance asynchronously. In this case, you can pass an Effect that creates an instance.

import i18next from 'i18next';
import { createStore, createEvent, fork, allSettled } from 'effector';
import { createI18nextIntegration } from '@withease/i18next';

// Event that should be called after application initialization
const appStarted = createEvent();

// Create Effect that creates i18next instance
const createI18nextFx = createEffect(() =>
  i18next.use(/* ... */).init(/* ... */)
);

const integration = createI18nextIntegration({
  // Pass Effect that creates i18next instance to the integration
  instance: createI18nextFx,
  setup: appStarted,
});

// You can replace createI18nextFx later during runtime
// e.g., during fork on client or server

Use static i18next instance

Even though it is better to use a replaceable instance to avoid global state and make it possible to replace the instance during runtime, you can pass a static instance as well.

import i18next from 'i18next';
import { createStore, createEvent } from 'effector';
import { createI18nextIntegration } from '@withease/i18next';

// Event that should be called after application initialization
const appStarted = createEvent();

const integration = createI18nextIntegration({
  instance: i18next.createInstance(/* ... */),
  setup: appStarted,
});

Use static asynchronous i18next instance since v23.2.0

The same approach can be used with an asynchronous instance.

import i18next from 'i18next';
import { createStore, createEvent } from 'effector';
import { createI18nextIntegration } from '@withease/i18next';

// Event that should be called after application initialization
const appStarted = createEvent();

const integration = createI18nextIntegration({
  instance: () => i18next.use(/* ... */).init(/* ... */),
  setup: appStarted,
});

Usage

Returned from createI18nextIntegration integration contains the following fields:

• $t is a Store containing a translation function
• translated which can be used as a shorthand for $t
• $isReady is a Store containing a boolean value that indicates whether the integration is ready to use
• reporting is an object with the fields that allow you to track different events of the integration
• since v23.2.0 $language is a Store containing the current language
• since v23.2.0 changeLanguageFx is an Effect that changes the current language
• since v23.2.0 $instance is a Store containing the instance of i18next that is used by the integration