Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

Storyblok now on AWS Marketplace: Read more

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content

How to render the rich text field using React.js?

  • FAQ
  • How to render the rich-text field using react js?

You can use the richTextResolver from our javascript SDK in your React.js components like in the code sample below. We recommend you to check also our Richtext field documentation out.

const StoryblokClient = require('storyblok-js-client')

let Storyblok = new StoryblokClient({
  accessToken: 'YOUR_TOKEN'
})

function createMarkup(storyblokHTML) {
  return {
    __html: Storyblok.richTextResolver.render(storyblokHTML),
  }
}

const RichTextField = ({ data }) => {
  return <div dangerouslySetInnerHTML={createMarkup(data)} />
}

export default RichTextField