Is there a way to output mutli-line text with line breaks?

[grahaml]

Hi,

Thanks to the team for all your hard work on this fantastic library!

I have a problem that I haven't been able to figure out... and forgive me if I've missed this somewhere throughout the docs or in other issues.

Is it possible to output multi-line text with line breaks? Here's a simple example of what I'd like to do:

const messages = defineMessages({
  privacyPolicyBlock: {
    id: 'common.privacyPolicyBlock',
    description: 'The privacy policy in its entirety',
    defaultMessage: `
    This is the privacy policy.

    It needs to have many paragraphs separated by newlines.

    Is this possible?
    `,
  },
});

const MyComponent = () => (
  <div>
    <FormattedMessage {...messages.privacyPolicy} />
  </div>
);

export default MyComponent;

// Output looks like
// "This is the privacy policy. It needs to have many paragraphs separated by newlines. Is this possible?"

Is there a way to get newlines with a FormattedMessage? If not, do you think there's a way that the support could be baked in? Would that interest you? I could try to submit a PR if yes.

Thanks for listening!

[ericf]

You're outputting pre-formatted text into a <div> with no whitespace style rules applied, so you're getting exactly what HTML does naturally. Try it outside of React Intl:

<div>
This is the privacy policy.

It needs to have many paragraphs separated by newlines.

Is this possible?
</div>

This looks more like selecting translated content rather than formatting a UI string. You might want to treat this kind of content, like a privacy policy, differently.

[grahaml]

Of course! I hadn't considered the white-space rule for the element. That might actually be all I need to achieve what I am trying to do.

What I think I was hoping for was a way to pass a multi-line string with newline characters and have react-intl output a series of <p> tags instead of putting it all into a <span>. Does something like that sound at all feasible?

Thanks for replying so quickly. I will let you know if the white-space works for me. Going to test in more browsers now.

[ericf]

The white-space idea will be a problem with indentation in the source file.

output a series of

tags instead of putting it all into a . Does something like that sound at all feasible?

I don't think that would be a great idea, but if you wanted to implement this for your use can you could by the fact that <FormattedMessage> accepts a child that's a function:

const messages = defineMessages({
  privacyPolicyBlock: {
    id: 'common.privacyPolicyBlock',
    description: 'The privacy policy in its entirety',
    defaultMessage: `
    This is the privacy policy.

    It needs to have many paragraphs separated by newlines.

    Is this possible?
    `,
  },
});

function linesToParagraphs(...nodes) {
    return nodes
        .map(node => typeof node === 'string' ? 
            node.split('\n').map(text => <p>{text}</p>) : node)
        .reduce((nodes, node) => nodes.concat(node), []);
}

const MyComponent = () => (
  <div>
    <FormattedMessage {...messages.privacyPolicy}>
        {linesToParagraphs}
    </FormattedMessage>
  </div>
);

export default MyComponent;

The other approach would be to write your privacy policy as HTML (especially if it's a separate file) and use <FormattedHTMLMessage> to fill in placeholders.

[grahaml]

accepts a child that's a function

Wow I missed that in the docs. That's awesome! Thanks very much for your help @ericf. Your solution will definitely work for my use case.

Bonus question: how would you approach breaking up huge text blobs like this?

A different solution I can see is actually breaking down each paragraph into separate messages, which would be cumbersome for both developers and translators. Imagining this:

const messages = defineMessages({
  p1: {
    id: 'privacyPolicy.p1',
    defaultMessage: 'Lorem ipsum...'
  },
  p2: {
    id: 'privacyPolicy.p2',
    defaultMessage: '...dolor sit amet...'
  },
  // ... etc ...
});

const MyComponent = () => {
  const paragraphs = messages.map(msg => <p><FormattedMessage {...msg} /></p>);
  return <div>{paragraphs}</div>;
});

That would also require that when the privacy policy is updated, that the developer add another key here. Additionally, I can see that breaking in some languages, where the paragraphs may be structured differently.

Do you have any other thoughts on this?

Thanks again!

[ericf]

Assuming the privacy policy is static content, I'd treat is as content/data with in the app, instead of a UI string. I would think about the same way as I would a blog post in a blogging application. You could write the original source as Markdown or HTML in a static file and have that translated, and render it into the React app at runtime via dangerouslySetInnerHTML.

[grahaml]

Cool idea - thanks again @ericf.

[bartvanandel]

@Erifc: Sorry if I'm replying to a closed issue, but when trying your solution with linesToParagraphs I'm getting this error:

invariant.js:38 Uncaught (in promise) Error: FormattedMessage.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Adding an extra wrapping component to the function result resolves this issue, but this generates an extra level in the DOM. Is there a way around this?

(In fact it would be nice if FormattedMessage did not insert an extra span at all. Does it really need to?)

For reference, my code:

const messages = {
    welcomeText: {
        id: "foobar.welcomeText",
        defaultMessage: 'some\nmulti-line\ntext'
    }
}

// not working
const toParagraphs = (...nodes) => (
    nodes.reduce((result, node) => (
        result.concat(
            typeof node === 'string'
                ? node
                    .split('\n')
                    .map(paragraph => <p>{paragraph}</p>)
                : node
        )
    ), [])
);

// workaround, adds extra DOM level
const toParagraphs = (...nodes) => {
    let key = 0;
    const children = nodes.reduce((result, node) => (
        result.concat(
            typeof node === 'string'
                ? node
                    .split('\n')
                    .map(paragraph => <p key={++key}>{paragraph}</p>)
                : node
        )
    ), []);

    return <span>{children}</span>
};

return (
    <div>
        {/* content... */}

        <FormattedMessage {...messages.welcomeText}>
            {toParagraphs}
        </FormattedMessage>

        {/* more content... */}

    </div>
);

NB: We're using react-intl@2.1.2, which seems to be up-to-date.

[ericf]

(In fact it would be nice if FormattedMessage did not insert an extra span at all. Does it really need to?)

Yes for the same reason you got the error with linesToParagraphs.

I don't think I actually tried the solution I provided, I just wrote it in the comment, you probably just want to use it as a reference…

[bartvanandel]

Well in that case, my second toParagraphs function does the job for anyone who needs it.

I know that SomeComponent.render() must return a single element, whereas it's obviously perfectly fine (and in fact required in order to have multiple items on the same level) to do something like this:

render() {
    return <div>{this.renderTheFooz()}</div>;
}

renderTheFooz() {
    return [
        <div>Foo</div>,
        <div>Bar</div>
    ]
}

I just assumed that <FormatMessage> would accept something like this as children as well (at least as the output of, in this case, the toParagraphs function), but apparently this is not the case.

[esellin]

In my case, I was outputting a small text inside a popup, and this worked well:

<p style={{whiteSpace: 'pre'}}>
  <FormattedMessage ... />
</p>

HTH

[abumalick]

whiteSpace: 'pre-line' will make the browser preserve the new line chars and will autowrap the text.

[bartvanandel]

Still not the same as multiple paragraphs though, this won't do the job for instance if you want your first paragraph character to have special styling, or borders around each paragraph.

[GTOsss]

What do you think about this solution?

<FormattedMessage
   id="some-text"
   values={{ br: <br />  }}
/>

And in localization file:
"some-text": "Text will be place on {br} new line"