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
– Murat Karagöz, Commented Aug 24, 2017 at 8: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
– Nocebo, Commented Aug 24, 2017 at 8:08
Just look at this question, it may help you: stackoverflow.com/questions/2392766/multiline-strings-in-json — emma93
– emma93, Commented Aug 24, 2017 at 8:08

felixmosh · Accepted Answer · 2022-03-23 10:29:24Z

175

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/[email protected]/dist/umd/i18next.min.js"></script>

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

edited Mar 23, 2022 at 10:29

answered Feb 18, 2019 at 12:27

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

pico_prob Over a year ago

In my case the json-editor BabelEdit escaped the \n to \\n

felixmosh Over a year ago

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.

ztefanie Over a year ago

Works perfectly fine in 2022. Thank you

Andru Over a year ago

Be aware: You might not want this behavior everywhere! Just add the style white-space: pre-line; (or white-space: pre; for that matter) to the element enclosing your text.

Ice K · Accepted Answer · 2022-10-04 08:00:37Z

10

You can add specifically to TooltipLink styles:

white-space: pre-line;

then, your \n in locale will work.

answered Oct 4, 2022 at 8:00

Ice K

1812 silver badges3 bronze badges

1 Comment

Paweł Mioduszewski Over a year ago

This is the best solution in my case. I'm using Tailwind CSS, so I've used whitespace-pre-line class.

somethingRandom · Accepted Answer · 2023-01-17 07:32:50Z

10

For those that do not want to add css code all over their React components, you can use the Trans component in the react-i18next package.

Create a translation key-value similar to:

{
  "message": "This is a line.<1/>This is another line.<1/>Yet another line"
}

Then, in your React component, use the <Trans/> component as follows

<Trans i18nKey="message" components={{ 1: <br /> }} />

The translation value will be rendered as

See https://github.com/i18next/react-i18next/issues/282

answered Jan 17, 2023 at 7:32

somethingRandom

1,2061 gold badge15 silver badges17 bronze badges

Comments

AmirSalar · Accepted Answer · 2018-09-25 18:39:15Z

4

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 ;))

edited Sep 25, 2018 at 18:39

answered Sep 25, 2018 at 18:24

AmirSalar

3673 silver badges14 bronze badges

1 Comment

MandyShaw Over a year ago

Hi, welcome to StackOverflow. Could you clarify your answer a bit please, the descriptive text is difficult to understand.

Hamza Waleed · Accepted Answer · 2023-07-18 15:31:22Z

3

For me, directly using this <br/> inside a string worked e.g

{ loremIpsum: "Lorem <br/> ipsum" }

<Trans
  i18nKey='loremIpsum'
/>

answered Jul 18, 2023 at 15:31

Hamza Waleed

1,50214 silver badges12 bronze badges

Comments

William S. Takayama · Accepted Answer · 2022-09-15 11:57:01Z

-1

For more complex cases, you could be using <Trans /> component and any HTML tags and even create custom ones.

Example:

<Trans
  components={{ boldSpan: <MyTextComponent strong component="span" variant="body" /> }}
  i18nKey="YourNamespace:TEXT_KEY"
/>

While your JSON file (YourNamespace.json):

{
  "TEXT_KEY" : "<boldSpan>Lorem ipsum</boldSpan><br/>",
}

For more details, check here: https://react.i18next.com/latest/trans-component

answered Sep 15, 2022 at 11:57

William S. Takayama

1483 silver badges10 bronze badges

Comments

alaa-sufi · Accepted Answer · 2022-10-13 20:18:32Z

-1

you can simbly use dangerouslySetInnerHTML like this

{"text":"first <br/> second"}

then

<div dangerouslySetInnerHTML={{ __html: t('text') }}></div>

edited Oct 13, 2022 at 20:18

answered Oct 13, 2022 at 9:08

alaa-sufi

11 bronze badge

Collectives™ on Stack Overflow

React i18n break lines in JSON String

7 Answers 7

4 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related