ReactJS

How to have multiple instances of i18next for component library

When you want to include i18n in your react component library, but the two use cases of i18next conflict with one another — long story short, you need I18nextProvider.

Step 1: create i18next instance

In component library, we will need to create an i18next instance, and not use initReactI18next to initialize it, because initReactI18next generates a global config, which will pollute the outside use cases.

import i18next from 'i18next'

// Note that we are using createInstance here
const i18n = i18next.createInstance(
    {
        lng: 'en',
        fallbackLng: 'en',
        ns: ['translation'],
        defaultNS: 'translation',
        react: { useSuspense: false },
        interpolation: { escapeValue: false },
        resources: {
            en: { translation: require('./locales/en/translation.json') },
            fr: { translation: require('./locales/fr/translation.json') },
        },
    },
    // We must provide a function as second parameter, otherwise i18next errors
    (err, t) => {
        if (err) return console.log(err)
    },
)

export default i18n

Step 2: I18nextProvider

import i18next from 'i18n'
import { useTranslation, I18nextProvider } from 'react-i18next'

export default function FantasticComponent(props) {
    // here we make sure that the scope of translations is confined within this component. Translation method t() is not available yet
    return (
        <I18nextProvider i18n={i18next}>
            <GridPage {...props} />
        </I18nextProvider>
    )
}

function FantasticComponentWithContext({ language }) {
    // Within i18n context, we now have access to t()
    const { t, i18n } = useTranslation()

    // here we pass in `language` as one of the props so we can sync its change:
    useEffect(() => {
        i18n.changeLanguage(language)
    }, [i18n, language])

    return <h1>{t('blast')}</h1>
}
Standard

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.