Search code examples
htmlreactjstypescriptreact-intl

Use <wbr> in FormattedMessage as value (with TypeScript)

I am trying to use the optional word break tag <wbr> in a message for <FormattedMessage id="some:message" />.

Background

Some words/texts are to large for some parent elements on mobile screens and we are using a column like layout, which we cannot replace for mobile environments easily.

Idea

Like {p: function p(textFrag: string) :JSX.Element { return (<p>{textFrag}</p>); }}:

We could use something like <FormattedMessage id="some:message" />,

{"some:message": "This is a very<wbr>very<wbr>long<wbr>word"} // as message

{wbr: function wbr() :JSX.Element { return (<wbr>); }}
// or
{wbr: function wbr() :JSX.Element { return (<React.Fragment><wbr></React.Fragment>); }}

But I am getting just a

JSX element 'React.Fragment' has no corresponding closing tag.ts(17008)

for the latter example and two error messages:

JSX element 'wbr' has no corresponding closing tag.ts(17008)
// plus
Unexpected token. Did you mean `{'}'}` or `&rbrace;`?ts(1381)

for the former.

Alternative

Is there any alternative for optional word breaks? Or any solution for <FormattedMessage> and ReactIntl?

Solution

  • JSX specs is a bit different to HTML one. In JSX, you need to use a self-closing tag like this:

    <wbr />

    This is valid in HTML but not in JSX:

    <wbr>