React-i18next: Multiline support

[vingrad]

Can you please make a good solution to multiline support?

[jamuhl]

Could you please provide some more information what you like to achieve?

From guessing i would say you like to transform a translation having newlines \n to multiple react-dom p elements?!?

[jamuhl]

any additional info on this?

[jamuhl]

closing for now...as no detail information provided...please feel free to reopen

[WaldoJeffers]

@jamuhl I'd be very interesting in having react-i18next splitting \n to multiple react-dom div or pelements, if this hasn't been added already 😄

[jamuhl]

looks doable in some custom component...

basically split the result of a key by n and map that array to divs...might not even need a component for that...

[jamuhl]

eg:

render() {
  const items = t('myKey').split('\n');

  return (
    <div>
    { items.map(item => <p>{item}</p>) }
    </div>
  )
}

[WaldoJeffers]

Ok thanks for your quick reply @jamuhl , don't you think this would make sense if react-i18n had an option to do this automatically?

[jamuhl]

idk...basically i think this is just to trivial to add - i mean look at it...it's a .spilt and .map

but if community agrees on it to be super useful to make a component out of it like:

<List items={t('myKey').split('\n')} renderItem={item => <p>{item}</p>} />

or

<MappedSplitKey i18nKey="key" /> // defaultProps splitBy='\n', itemElement='p'

i will accept a PR

[WaldoJeffers]

Alright, thanks for this @jamuhl . Will use this workaround for now, and submit a PR if I find it too frustrating 😛

[annslittleflower]

i also found a way to do multiline stuff, here is example

"text": "bla bla bla. \nBetter photos by photo guideline \nIncluding"

then to tag you are going to insert this text you must add this css:

white-space: pre-wrap

????????????????
PROFIT!

p.s. guys please if you can edit formating of this message, im writing really in a hurry
p.p.s n is so close to the words because white spaces also preserving

[ackvf]

Now what if I want to insert a <br/> element instead of wrapping it?

t('test').split('\n').reduce((r, c, x) => r ? [...r, <br key={x}/>, c] : [c], null)

This is ugly enough to consider adding it to the library.

[adrai]

Couldn’t the Trans component be useful for this? https://react.i18next.com/latest/trans-component

[MariusMeiners]

this should be implemented for sure

[tigerabrodi]

@MariusMeiners Have you checked the Trans component as @adrai linked above?

[jamuhl]

The Trans component does not convert \n to <br /> and for a good reason. Not everyone would expect this to happen. Linefeed belongs to text formatting and is not part of the HTML standard. Like @annslittleflower mentions if you need to support n you need to use explicitly <pre> or set the correct css properties.

I wouldn't add this to Trans as it would have to be opt-in.

Adding a new component like https://github.com/i18next/react-i18next/issues/282#issuecomment-371865291 would be acceptable but to be honest, that is no rocket science and easy doable in userland. Like @ackvf show-cases there would be a significant difference in mapping to <p> vs adding a <br /> which brings me back to @annslittleflower solution is the best option for doing it right.

[ErAz7]

@ackvf
if you prefer JS approach, you can also use dangerouslySetInnerHTML. but obviously can be dangerous (vulnerable to XSS), should be carful not to use user input in them. I think this is cleaner since no logic is going on like in .reduce

<div
    dangerouslySetInnerHTML={{
        __html: t('key').split('\n').join('<br />')
    }} />