Wrapping interpolated values in tags

[james-brndwgn]

What is the recommended method to wrap an interpolated value in tags. For example, if I have

polyglot.extend({
  "hello_name": "Hola, %{name}. How are you?"
});

polyglot.t("hello_name", {name: "DeNiro"});
=> "Hola, DeNiro. How are you?"

and would like to bold the name (wrap it in <strong> tags). Is there a recommended way to do this?

[ljharb]

This is how Airbnb tends to do it:

polyglot.extend({
  hello_name: 'Hola, ${name_start}${name}${name_end}. How are you?',
});

polyglot.t('hello_name', { name: 'DeNiro', name_start: '<strong>', name_end: '</strong>' });

[ljharb]

@dcworldwide it works, but then it produces HTML, which has to be unsafely added to the DOM.

[james-brndwgn]

Yep. As @ljharb says. It works, but far from ideal. Mixing html with translations would not be a good situation. It's simple enough to drop <strong> tags in. I kept my example simple for the sake of simplicity. However should you need to wrap a link then you'll really end up mixing html with your translations. In the end I ended up writing a little wrapWithTag utility function

export function wrapWithTag (tag, string, attrs = '') {
  if ((tag && typeof tag === 'string') && (string && typeof string === 'string')) {
    return `<${ tag } ${ attrs }>${ string }</${ tag }>`;
  }
}

[ryanacorn]

This is how Airbnb tends to do it:

polyglot.extend({
  hello_name: 'Hola, ${name_start}${name}${name_end}. How are you?',
});

polyglot.t('hello_name', { name: 'DeNiro', name_start: '<strong>', name_end: '</strong>' });

This doesn't seem to work. I'm getting the literal string tags displayed. (Is it because I'm using it in React?)

[ljharb]

Yes. In react, you’d have to use dangerouslySetInnerHTML to make that work.

[spikebrehm]

At Airbnb, we had a <T> component with an API like:

polyglot.extend({
  hello_name: 'Hola, ${tag_start}${name}${tag_end}. How are you?',
});

<T
  k="hello_name"
  name="DeNiro"
  tag={<strong />
/>

That essentially sliced up the string into an array of React.ReactNode for rendering.

[ljharb]

Sadly i haven’t had time to recreate that yet as an open source component.

[Xiphe]

Answering the original question:

I advocate keeping markup out of the translation files since these might be generated or created by people or tools that do not know html well.

Therefore I'd recommend using polyglot.t("hello_name", {name: `<strong>DeNiro</strong>` });.

--

With the react discussion since #170 you could also provide a custom replace implementation (see example: https://codesandbox.io/s/admiring-framework-lb367l?file=/src/App.js) to return valid react fragments from polyglot.

[Xiphe]

So the newly released v2.5.0 now supports customizing the replace implementation like i've mentioned above.

With that you can create a replace that is able to handle cases like polyglot.t("hello", { name: <h1>Hello</h1> }).

See https://codesandbox.io/s/admiring-framework-lb367l?file=/src/App.js:1209-1257 for details.