Rich Text rendering made easy

We are happy to announce the new version of @enonic/react-components (v5.0.0, available now on NPM) which enables rendering of Rich Text from XP.

You heard it right - you no longer have to use processHtml from our Core API or struggle with your own implementation to render contents of an HtmlArea input or a Text component in a React or Next.xp application. Just fetch data that contains Rich Text from our Guillotine GraphQL API and feed it to the RichText component from the @enonic/react-components library, which will correctly handle all the images, links and macros stored in the rich text.

Next.xp integration has also been changed to use the new RichText component. Simply upgrade @enonic/nextjs-adapter in your Next.xp site to v3.1.0 and the rest will be taken care of.

To demonstrate how fast and easy it is to build a React app where XP is used only as a data source we have created a new tutorial which renders sample data fetched from GraphQL API in a simple React app.

Give it a try and let us know what you think!

5 Likes

What are the benefits of using this new component instead of processHtml?

It is mainly relevant when using React in your front-end, headless approach.

It gives devs full cont over the Rich text, including ability to manipulate links to content and images, render Macros with React components to fit perfectly with their front-end.

If you are using the standard Enonic JS framework for your front-end, processHtml probably does everything you need already.