# i18Next translations - Thurs 10th September, 2020

I made an initial POC on the web Wall and [i18Next-React](https://github.com/i18next/react-i18next). It was quite straightforward and nice to introduce translations and localisations.

**Steps were:**

1. Create `i18n` config:

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import Backend from 'i18next-http-backend'

const fallbackLng = ['en']
const availableLanguages = ['en', 'es', 'chs']

// don't want to use this?
// have a look at the Quick start guide
// for passing in lng and translations on init

i18n
    // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
    // learn more: https://github.com/i18next/i18next-http-backend
    .use(Backend)
    // pass the i18n instance to react-i18next.
    .use(initReactI18next)
    // init i18next
    // for all options read: https://www.i18next.com/overview/configuration-options
    .init({
        fallbackLng,
        debug: true,
        whitelist: availableLanguages,
        interpolation: {
            escapeValue: false, // not needed for react as it escapes by default
        },
    })

// eslint-disable-next-line import/no-default-export
export default i18n

2. Include as part of bundle by importing to `index.tsx`:

    import './i18n'

3. Setup translation.json files. For my purposes, I included them in my React app's `public` folder and the local Node server served them, but you could also import into the`i18` config file directly, or fetch them from an API endpoint.
Ideally, I see us having English translations bundled with the app itself, and other translation files requested from the API.
5. Use the `useTranslation` hook in your React components:

import { useTranslation } from 'react-i18next'
        const { i18n, t } = useTranslation()
        
        
        // if you want to allow user to change page language, can do it like this
        const changeLanguage = (lng: 'en' | 'es' | 'chs'): void => {
            i18n.changeLanguage(lng)
        }
        
        // translated string
        return <P>{t('feedItems.nomination')}</P>

###### tags: `programmingjournal` `2020` `translation` `i18next` `transifex`