# i18n work - Tues 27th Oct, 2020

Ironed out most of the difficult parts of applying translation / localization to C+. What needs done now is the grunt work going through all the app making sure everything is properly translated!

import i18n, { Resource } from 'i18next'
import { initReactI18next } from 'react-i18next'

import { isVowel } from './i18n.utils'
import { en_GB_translation, en_US_translation } from './translations'

const resources = {
    'en-GB': en_GB_translation,
    'en-US': en_US_translation,
} as Resource // type asserted due to innaccurate library typing

export type Translations = typeof resources

i18n.use(initReactI18next).init({
    resources,
    // i18n will use this lang if selected lang doesn't have those values
    fallbackLng: 'en-GB',
    lng: 'en-GB',
    // define the key seperator in your translation objects
    keySeparator: '.',
    interpolation: {
        escapeValue: false,
        format: (value, format, lng) => {
            switch (format) {
            // adding "a/an" articles
                case 'article':
                    return isVowel(value) ? 'an' : 'a'
                default:
                    return value
            }
        },
    },
})

export { i18n }

I created a custom [Trans](https://react.i18next.com/latest/trans-component) component that means I don't have to pass the `components` map each time:

import React from 'react'
import { Trans as TransBase, TransProps } from 'react-i18next'
import { Em, H1, H2, H3, H4, H5, H6, P, Strong } from 'patternlab'

const TransComponentMap: Record<string, React.ReactNode> = {
    h1: <H1 />,
    h2: <H2 />,
    h3: <H3 />,
    h4: <H4 />,
    h5: <H5 />,
    h6: <H6 />,
    p: <P />,
    span: <P />,
    strong: <Strong />,
    em: <Em />,
}

export const Trans: React.FC<TransProps> = ({ components, parent, ...props }) => (
    <TransBase
        {...props}
        components={{
            ...TransComponentMap,
            ...components,
        }}
    />
)

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