Connor Rowland
Sep 8, 2021
Updated: Mar 1, 2022
While you may be able to type a double line break, getting it to render properly becomes a bit more difficult.
Note: This guide is a bit technical and will require coding in React to accomplish.
If you’re using React to create a Contentful web application, you have a few options. The first option will allow you to add line breaks for rich text fields, and the second will provide you the ability to add line breaks to regular text fields.
By default, Contentful will replace line breaks added to the Rich Text editor with /n. What you can do to convert these into line breaks is use the renderText option in the @contentful/rich-text-react-renderer to replace all instances of \n with a <br /> tag.
const renderOptions = {
renderText: text => {
return text.split('\n').reduce((children, textSegment, index) => {
return [...children, index > 0 && <br key={index} />, textSegment];
}, []);
},
};
This code example is taken directly from the @contentful/rich-text-react-renderer README on GitHub.
Alternatively, you can add a <br/> character directly to your rich text fields and configure your front end to apply line breaks where it sees them. This can be in either rich text fields, or regular text fields.
This code looks something like this:
const returnLineBreaks = (text: string) => {
if(text.includes('<br/>')) {
// Map through each segment of text around line breaks added:
return text.split('<br/>').map((innerText: any, i: number) => {
const lineBreakStyle = {
display: 'block',
minHeight: '24px'
}
// Return a span around each group of text:
return (
<span key={i} style={lineBreakStyle}>
{innerText}
</span>
)
})
} else {
// If there's no line breaks, just return the text as is:
return text
}
}
To enable this to be used in rich text fields, you can call the returnLineBreaks and pass strings from your rich text data received as the text parameter.
And if we're on the topic of extending rich text to add line breaks, I'd imagine you'll want to add alternative UI elements, too.
Learning the process of modeling components to enable alternate UI styles in rich-text fields will help you get to a better place with Contentful. One where you know precisely how to create components that reflect all of the UI styles you have.
This understanding will help you immensely as you grow your site with Contentful.
You can learn more about a process we've defined for effective content modeling below.