Skip to content

Instantly share code, notes, and snippets.

@DominikAngerer
Created April 16, 2020 22:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DominikAngerer/505be80037de246ae9eabc121bb71cdb to your computer and use it in GitHub Desktop.
Save DominikAngerer/505be80037de246ae9eabc121bb71cdb to your computer and use it in GitHub Desktop.
RichText with sanitize-html
// npm install sanitize-html
const sanitizeHtml = require('sanitize-html');
// npm install storyblok-js-client
const StoryblokClient = require('storyblok-js-client')
// Storyblok is now available as variable which contains the richTextResolver functionality
const Storyblok = new StoryblokClient({})
function createMarkup(storyblokHTML) {
return {
// configure sanitizeHtml as needed: https://www.npmjs.com/package/sanitize-html#node-recommended
__html: sanitizeHtml(Storyblok.richTextResolver.render(storyblokHTML)),
}
}
const RichTextField = ({ data }) => {
return <div dangerouslySetInnerHTML={createMarkup(data)} />
}
export default RichTextField
// Usage in other components -> import that richTextField Component
// and use like: <RichTextField data=your_field></RichTextField>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment