useTranslation

View on GitHub

import { useTranslation } from '@sky-uk/ui-core';

The useTranslation hook can be used to offer translations for hardcoded pieces of content.

Example Implementation

Select background colour

() => {
  const Example = () => {
    const Component = () => {
      const text = useTranslation("component.text", { fallback: "My fallback" });
      return <p>{text}</p>;
    };
    return (
      <>
        <Component />

        <TranslationContext.Provider
          value={{ component: { text: "My translated text" } }}
        >
          <Component />
        </TranslationContext.Provider>
      </>
    );
  }
}

() => {
  const Example = () => {
    const Component = () => {
      const text = useTranslation("component.text", { fallback: "My fallback" });
      return <p>{text}</p>;
    };
    return (
      <>
        <Component />

        <TranslationContext.Provider
          value={{ component: { text: "My translated text" } }}
        >
          <Component />
        </TranslationContext.Provider>
      </>
    );
  }
}