new line support?

[ffan0811]

Hello, Thanks for the awesome library!
Seems like new line, \n, is not supported in next-translate <Trans/>

Is there any way to support it or should I suggest it as a new feature?

[aralroca]

Remember that \n in HTML doesn't work either. If you want to split text into different lines you have to use HTML inside your translations.

// The defined dictionary enter is like:
// "example": "<p>This text</p><p>is in two lines</p>"
<Trans i18nKey="common:example" components={{ p: <p /> }} />

[ffan0811]

Thank you for the answer. :)

[ornakash]

Do you know why this is causing Hydration error in next@13?

[aralroca]

@ornakash create a reproducible example and report the issue in order to investigate it. Thanks

[mateuszJS]

Small improvement, for breaking a line you suppose to use dedicated tag for it <br/>. Splitting one logic sentence into two separate paragraphs is not 100% correct from semantic point of view, and this solution won't work well with tags like <h1>(you don't want to have two h1 tags on same page or putting <p> inside <h1>).

// "example": "This text<br/>is in two lines"
<Trans i18nKey="common:example" components={{ br: <br /> }} />

[EwenQuim]

Replacing \n by <br /> seems a pretty good idea

[VinceBT-BG]

Newlines are supported when using the t function, so why doesn't it work with <Trans/> component ? I made all my translations using newlines and I cannot use them with this plugin. Translators should have something close to WYSIWYG in their editor and should not consider something just because HTML doesn't work this way, \n works with the basic translation function, so it should work the same with <Trans />