React i18n break lines in JSON String

Question

I'm working with i18next for react https://github.com/i18next/react-i18next. I'm struggling to break lines within the string in my JSON language file.

This is what I already tried, which doesn't break a new line:

line: "This is a line. \n This is another line. \n Yet another line",
line: ("This is a line."+ <br/> + "This is another line. \n Yet another line"),
line: ('This is a line. <br/> This is another line. \n Yet another line'),

I obviously try to make a new line after each sentence. This is how I call it:

<TooltipLink onClick={() => {
    this.toggleHelpTextDialog(t('test:test.line'));
}}/>

Any ideas? Thanks!

This entirely depends on the component. It may or may not support line breaks. Did you try to set the text directly without i18n translation? — Murat Karagöz, Aug 24 '17 at 08:04
I did set the text directly and it doesn't work either. I'm setting the text for the dialog via props. You think that might cause the problem? — Nocebo, Aug 24 '17 at 08:08
Just look at this question, it may help you: https://stackoverflow.com/questions/2392766/multiline-strings-in-json — emma93, Aug 24 '17 at 08:08

felixmosh · Accepted Answer · 2022-03-23T10:29:24.053

98

You can do it with css white-space: pre-line; & \n in the translation text.

const root = document.getElementById('root');

i18next.init({
  lng: 'en',
  resources: {
    en: {
      translation: {
        "key": "Hello world\nThis sentence should appear on the second line"
        // ----------------^ new line char
      }
    }
  }
}, function(err, t) {
  // initialized and ready to go!
  root.innerHTML = i18next.t('key');
});

#root {
  white-space: pre-line;
}

<script src="https://unpkg.com/i18next@15.0.9/dist/umd/i18next.min.js"></script>

<div id="root"></div>

edited Mar 23 '22 at 10:29

answered Feb 18 '19 at 12:27

felixmosh

26,970
6
57
80

In my case the json-editor BabelEdit escaped the `\n` to `\\n` – pico_prob Sep 29 '20 at 12:12
I'm not familiar with BabelEdit but line break (the one that creates when you hit Enter) is not writing `\n` in the editor but press Enter. – felixmosh Sep 29 '20 at 12:31
Works perfectly fine in 2022. Thank you – Steffi Jan 05 '22 at 10:17

AmirSalar · Answer 2 · 2018-09-25T18:39:15.443

for example you write below text in JSON language file.

text:"Hello \n How are you? \n what are you doing?"

and then in return part write

<div id='app'><div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<script>
      render() {
          return (
              text.split('\n').map(c => {
                  return ( <p> {c} </p>) 
                   });
                 )
               }
              

              ReactDOM.render(
                <BreakLine / >
                document.getElementById('app')
              )
</script>

well, when call split method, try to create list and seperate from '\n' and with method map type each of them on paragraph so can break line ;))

Hi, welcome to StackOverflow. Could you clarify your answer a bit please, the descriptive text is difficult to understand. — MandyShaw, Sep 25 '18 at 19:09

score 4 · Answer 3 · answered Oct 14 '21 at 09:14

You also can do it with CSS that's very easy to do:

CSS:

#root {
  white-space: pre-line;
}

HTML:

<script src="https://unpkg.com/i18next@15.0.9/dist/umd/i18next.min.js"></script>

<div id="root"></div>

It will interpret the \n in the translation JSON as a linebreak!!!

score 0 · Answer 4 · answered Aug 24 '17 at 08:33

0

<br /> is the correct way, but it does not goes into the text or translations. Example :

<div>
  {'my text line 1'}
  <br />
  {'my text line 2'}
</div>

However, if you want to keep the line breaks (\n) inside the text, then do it like this using dangerouslySetInnerHTML :

const text = "This is a line. \n This is another line. \n Yet another line";
<div dangerouslySetInnerHTML={text} />

answered Aug 24 '17 at 08:33

Fawaz

3,049
2
15
22

Unfortunately I can't do this in my case, since I'm not only setting strings, but also whole components. But thank you nevertheless! – Nocebo Aug 24 '17 at 08:44

React i18n break lines in JSON String

4 Answers4

Linked