Support passing objects to <Trans components={{ ... }} />

Hi there! First of all, thank you for all the work you put into i18next! It is by far the best i18n lib we’ve come across, and it just keeps getting better and better 😃

Is your feature request related to a problem? Please describe.

I’m running into some issues with the numeric (<0>) placeholders in the <Trans components={[...]} /> prop. First of all, the translation tool we use has first-class support for html placeholders, meaning that during the translation process they automatically get detected and copied to the target translation. Without a mechanism like this you very quickly run into awkward scenarios with for example RTL input. However, this detection is built on top of an X(HT)ML parser, and the XML spec dictates that tags are only valid if they start with a letter. As a result the numeric <0> placeholders are not picked up and the detection does not work in this case.

Secondly, I’m noticing that numeric placeholders sometimes convey too little context to translators. Given the following 2 strings:

• <0>{{firstName}} {{lastName}}</0> added a new <1>comment</1> to article <2>{{articleTitle}}</2>
• <profileLink>{{firstName}} {{lastName}}</profileLink> added a new <commentLink>comment</commentLink> to article <articleLink>{{articleTitle}}</articleLink>

I personally prefer the latter one. It’s a bit more verbose, but verbosity is important when involving external translators into a project as they need additional context to figure out what is what. In addition, it looks more familiar to html which they generally already have some notion of, + it’s a bit more resilient to change as it doesn’t rely on order.

Describe the solution you’d like

I was wondering if you’d be open to support a secondary object syntax for the components prop, i.e.:

<Trans
  i18nKey="myKey"
  components={{
    articleLink: <a href="..." />,
    commentlink: <a href="..." />,
    profileLink: <a href="..." />
  }}
  values={values}
/>

Which would enable the use of the “named placeholder” method above. I can have a stab at this myself, just will have to dig into the Trans component a bit first 😃

[iamandrewluca]

@klis87 duplication can be avoided.

"react-i18next": "^10.8.1",

<Trans i18nKey="test" components={[<Link to="/" />]} />

{
  "test": "You can <0>navigate to the home page</0> or use the main menu.",
}

You can <a href="/">navigate to the home page</a> or use the main menu links.

Also passing object to components will be easier to maintain

<Trans i18nKey="test" components={{
  terms: <Link to="/terms" />,
  policy: <Link to="/policy" />,
}} />

{
  "test": "You should agree <terms>our terms</terms> and <policy>our policy</policy>"
}

[klis87]

The very big advantage of this is also you need to pass children for Trans currently, which I find really problematic. For instance thing like:

<Trans i18nKey="dragOrPickFromDisk">
  Drag or
  <Button>
    pick from disk
  </Button>
</Trans>

Several problems with this:

• we kinda duplicate translations within jsx, really dragOrPickFromDisk should be all it needs plus object of components to be injected
• with multiple and nested components interpolation in translation becomes really hard to maintained, and is not too much readible

Compare it with this:

<Trans
  i18nKey="dragOrPickFromDisk"
  components={{ button: <Button />}}
/>

Advantage is cleaner jsx, less duplication, plus it would be easy to use interpolations in translations, as u would not use indexes of components anymore, but keys