interminimal

It can optionally perform template substitution on the translated text, allowing child components to render portions of the translated text with arbitrary wrappers.

By default translated text is wrapped in a span. Render a different element using the as property.

If the wrapped content can't be translated into the context's preferred language it will have a lang= property specifying its actual language.

The simplest usage is to render translatable content without template substition:

// Render multilingual content
const hi = { en: "Hello", de: "Hallo", fr: "Bonjour" };
return <T content={hi} />;
// fr: <span>Bonjour</span>

Template substitution allows you to build whole component trees from a translated string:

const info = {
  en: "Here's a %1[useful link] and here's some %2[italic text]",
  fr: "Voici %2[du texte en italique] et un %1[lien utile]",
  de: "Hier ist ein %1[nützlicher Link] und hier ein %2[kursiver Text]"
};
return (
  <T as="div" text={info}>
    <T as="a" tag="%1" href="/" />
    <T as="i" tag="%2" />
  </T>
);
// fr:
//   <div>
//     Voici <i>du texte en italique</i> et un <a href="/">lien utile</a>
//   </div>

You can also look up and translate dictionary tags:

// Same as the previous example if `info` is in the dictionary
return (
  <T as="div" tag="info">
    <T as="a" tag="%1" href="/" />
    <T as="i" tag="%2" />
  </T>
);

See Using T for more examples.

Within this context any content which can't be translated into the requested languages will have it's own lang= property to reflect the fact that it is in a different language than expected.

// Renders as <div lang="cy">....</div>
const Welsh: ComponentType<{ children: ReactNode }> = ({ children }) => (
  <Translate lang="cy">{children}</Translate>
);

// Renders as <section lang="cy">....</section>
const WelshSection: ComponentType<{ children: ReactNode }> = ({ children }) => (
  <Translate as="section" lang="cy">
    {children}
  </Translate>
);

Unlike TranslateLocal Translate always wraps the translated content in an element with a lang= property.

const Miscount = ({ children }: { children: ReactNode }) => {
  // pretend one is three
  const dict = { $$dict: { one: { en: "three" } } };
  return <TranslateLocal dictionary={dict}>{children}</TranslateLocal>;
};