Feature Proposal: Trans prop to wrap text nodes in a user-specified element

[feross]

🚀 Feature Proposal

A Trans prop to wrap text nodes in a user-specified element, i.e. <span>, or a top-level i18next instance option to do the same.

<Trans
  t={t}
  i18nKey='...'
  wrapTextNodes='span'
/>

Motivation

We would like a way to wrap each "text part" (i.e. HTML text node) of a translation in a <span> element so we can work around a well-known Google Translate issue with React apps. See: facebook/react#11538 When the user activate the built-in Google Translate functionality in Chrome, or uses a browser extension to do the same, then React throws an exception which breaks the entire app. We can't control when/if users trigger Google Translate functionality on our app, so we need a way to prevent React from crashing.

Right now, when using the <Trans> component with interpolation, any text outside of the "interpolation tag" is added to the DOM directly as a TextNode. It's not wrapped in a <span> or any other HTML element.

Here's an example. Take the <Trans> component used like this:

<div>
  <Trans
    t={t}
    i18nKey='myKey'
    components={{
      tooltip: <TooltipText label='This is a tooltip' />
    }}
  />
</div>

With the key myKey defined as follows:

We use <tooltip>end-to-end encryption</tooltip> and a link that automatically expires

The produced HTML looks like:

<div>
  Wormhole lets you share files with
  <span class="css-7fgewl">end-to-end encryption</span>
  and a link that automatically expires.
</div>

Note the two TextNodes (Wormhole lets you share files with and and a link that automatically expires.) which are not wrapped in a <span> or any kind of wrapper element.

This completely breaks Google Translate due to the bare text nodes. The well-known workaround is to wrap all TextNodes in a <span>.

Example

A Trans prop to wrap text nodes in a user-specified element, i.e. <span>, or a top-level i18next instance option to do the same.

<Trans
  t={t}
  i18nKey='...'
  wrapTextNodes='span'
/>

Other note

It appears that the v9 <Interpolate> component may have had an option similar to this (dangerouslySetInnerHTMLPartElement) which defaulted to wrapping text in <span> but it appears that it had a slightly different use case and didn't make it into <Trans>.

[jamuhl]

Guess we could patch this faster than google translate will be fixed ;)

Should be a rather easy change...

• Text nodes get handled here: https://github.com/i18next/react-i18next/blob/master/src/Trans.js#L245
• Options get passed here https://github.com/i18next/react-i18next/blob/master/src/Trans.js#L312 to the renderNodes function -> should be simple to pick an option from i18next.options.react or from props

If you like feel free to help out with a pull request?

[feross]

@jamuhl Sure thing. Here's a PR: #1324 I decided to just add a single top-level option, similar to how the existing trans* top-level options don't have prop equivalents. I think this addresses the Google Translate use case.

[adrai]

released with v11.10.0