MyComponent.tsx

function MyComponent() {
  const { locale, setLocale, i18n } = useContext(myI18nCtx);
  const [name, setName] = useState("");
  
  return (
    <div>
      <p>{i18n.home.title} :)</p>
      <p>{i18n.home.body}</p>
      <input type={"text"} value={name} onChange={e => setName(e.target.value)} />
     
      {/* a couple of <br /> tags, just to give a better look to the example. */}
      <br />
      {/* `welcome` will always fallback on the 'en' dictionary because the ‘pt’ dictionary doesn't provide it. */}
      <I18nHtml>{i18n.welcome(name)}</I18nHtml>
      <br />
      <a onClick={() => setLocale("pt")}>pt</a>
      <br />
      <a onClick={() => setLocale("en")}>en</a>
      <p>{i18n.myCurrentLocale(locale)}</p>
    </div>
  );
}