i18n Internationalization starter setup

[adamjarling]

What does this do?

Implements some initial i18n patterns for how to define and use internationalization in Clover. This approach uses the React flavor of the i18Next package.

Directory structure

/src/i18n

• config.ts - Root config file
• /@types - Support for Typescript
• [language here] - i.e. en, de, etc.
  • Individual .json files can live here, which name space the different Clover exports? i.e. viewer.json, common.json, bloom.json, etc...

How it works

Pull in the configuration by importing confg.ts into a top level file.

// src/components/Viewer/index.tsx

import "src/i18n/config";

Then use translations in a component like so:

import { useTranslation } from "react-i18next";

export default MyComponent() {
  // Pass in an optional array of namespaces to use short-hand references
  const { t } = useTranslation(["viewer"]);

  return (
    <>
      <span>{ t("aside.collapsibleTrigger.openMessage") }(</span>

      {/* Or alternatively target the namespace */}
       <span>{ t("viewer:aside.collapsibleTrigger.openMessage") }(</span>
    </>
  )

}

Notes

To enable Typescript support (type checking and autocomplete), this file will have to be accurate, and stay in sync with the directory structures:

src/i18n/@types/resources.ts

Currently en is configured to be the default, but as i18n becomes more populated there is an LanguageDetector we can eventually pull into initial configuration.

// src/i18n/config.ts

import LanguageDetector from 'i18next-browser-languagedetector';

i18next
  .use(LanguageDetector)
  .use(initReactI18next).init({...})