Is there something similar to react-i18n trans-component?

[laneme]

The Trans component allows transling components with childrens in it. Heres an example pulled from their docs https://react.i18next.com/latest/trans-component

import { Trans } from 'react-i18next';

function MyComponent({ person, messages }) {
  const { name } = person;
  const count = messages.length;

  return (
    <Trans i18nKey="userMessagesUnread" count={count}>
      Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
    </Trans>
  );
}

"nameTitle": "This is your name",
"userMessagesUnread_one": "Hello <1>{{name}}</1>, you have {{count}} unread message. <5>Go to message</5>.",
"userMessagesUnread_other": "Hello <1>{{name}}</1>, you have {{count}} unread messages.  <5>Go to messages</5>.",

You see how it allows translating inner childs like the strong element? Makes life easier when we try to translate elements with lots of spans and micro styles in one chunk of text.

Is there something similar in typed-i18n?

[ivanhofer]

No, there is no such feature present in typesafe-i18n. The library works with a variety of frameworks but does not offer any react-specific components for now. You would need to write a custom component yourself in order to achive a similar behavior.

[laneme]

Ah i see. Thank you.