Ed Balls

edballs.edballs.tsx

// Ed Balls

import React from 'react';
import i18n from 'i18next';
import {initReactI18next, useTranslation} from 'react-i18next';
import {cloneDeep} from 'lodash';

// This is usally imported from a json file or similar
const langEN = {
  title: 'My amazing app',
  description: "An app that has nothing to do with Politics that's for sure!",
};

// Clone the object with all keys
const langEdBalls = cloneDeep(langEN);

// Traverse the object and replace all string values with "Ed Balls"
const replaceWithEdBalls = (obj: any) => {
  Object.keys(obj).forEach(x => {
    if (typeof obj[x] === 'string') {
      obj[x] = 'Ed Balls';
    } else if (typeof obj[x] === 'object') {
      replaceWithEdBalls(obj[x]);
    }
  });
};

replaceWithEdBalls(langEdBalls);

// Setup i18n
i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources: {
      en: {
        name: 'English',
        translation: langEN,
      },
      edballs: {
        name: 'Ed Balls',
        translation: langEdBalls,
      },
    },
    fallbackLng: 'en',
    lng: 'edballs',
  });

// Lets render the app
export const App = () => {
  const {t} = useTranslation();
  return (
    <div>
      <h1>{t('title')}</h1>
      <h2>{t('description')}</h2>
      <p>I am not translated yet...</p>
    </div>
  );
};