# i18n cont. - Fri 30th Oct, 2020

Finished i18 translation / localisation work today.

It was mostly straightforward, but a few gotchas:

I had to initiate `i18n` outside of the component, then use an effect to change the language based on the locale:

import React, { useEffect } from 'react'
import { I18nextProvider } from 'react-i18next'

import { useCurrentUser } from '../hooks/useCurrentUser/useCurrentUser'

import { i18n } from './i18n'

export const I18nProvider: React.FC = ({ children }) => {
    const { data } = useCurrentUser()

    useEffect(() => {
        if (data.locale?.lang) {
            i18n.changeLanguage(data?.locale?.lang)
        }
    }, [data])

    return (
        <I18nextProvider i18n={i18n}>
            <>{children}</>
        </I18nextProvider>
    )
}

Remember also to translate the accessibility props.

###### tags: `programmingjournal` `2020` `C+` `i18next` `translationlocalisation`