useTranslate() for component localization ?

[gnaeus]

An idea for lazy component localization with code splitting.

Suppose we want to localize component named UserProfile

// UserProfile.jsx
const UserProfile = ({ firstName, lastName }) => {
   return (
    <article>
      Hello, {firstName}!
      <div>First Name: {firstName}</div>
      <div>Last Name: {lastName}</div>
      <footer>
        Full Name: {firstName} {lastName}
      </footer>
    </article>
  );
};

At first we should define dynamically imported translations file per language:

// UserProfile.rus.jsx
export default {
  "First Name": "Имя",
  "Last Name": "Фамилия",
  "Hello, ${name}!": name => `Привет, ${name}!`,
  footer: (firstName, lastName) => (
    <footer>
      Полное Имя: {firstName} {lastName}
    </footer>
  )
};

Translation file is plain object, which values are strings or functions returning strings or even JSX markup.

Then we create React Context for locale LocaleContext = React.createContext() and new hook named useTranslate. It loads translations file on every context change and returns translation function to a component.

// UserProfile.jsx
const UserProfile = ({ firstName, lastName }) => {
  // translation function
  const tr = useTranslate(lang =>
    import(/* webpackChunkName: "i18n-" */ `./UserProfile.${lang}.jsx`)
  );

  return (
    <article>
      {tr`Hello, ${firstName}!`}
      <div>
        {tr`First Name`}: {firstName}
      </div>
      <div>
        {tr`Last Name`}: {lastName}
      </div>
      {tr("footer", firstName, lastName) || (
        <footer>
          Full Name: {firstName} {lastName}
        </footer>
      )}
    </article>
  );
};

Translation function can work in two modes:

• As ES6 template tag it extracts key and arguments from passed template, and also returns raw ES6 template value as fallback if key is not found in translations object.
• As regular function it uses first argument for key lookup and passes rest arguments to translation template.

Benefits:

• We can localize each component independently.
• Or we can create common resources and utilities and import them in each component translations file.
• Or we can group translations in other ways.

Implementation can be found here: gist (about 100 SLOC).
If this is interesting, I can submit a PR.

[streamich]

Maybe use-t can be extended with some ideas from this?

[gnaeus]

The obvious way to do it — add optional argument to useT, withT and optional prop to <Trans>

useT(load?: (locale, namespace) => Object | Promise<Object>);
withT(load?: (locale, namespace) => Object | Promise<Object>);
interface TransProps {
  load?(locale, namespace): Object | Promise<Object>;
}

And use it:

const [t, state] = useT(locale => import `./UserProfile.${locale}.jsx`))

export default withT(locale => import `./UserProfile.${locale}.jsx`))(MyComponent)

<Trans load={locale => import `./Resources.${locale}.jsx`}></Trans>