A react component for rendering html strings.

Usage no npm install needed!

<script type="module">
  import shanedaughertyReactContentBlock from 'https://cdn.skypack.dev/@shanedaugherty/react-content-block';


React Content Block

A react component for rendering html strings.

Simple Usage

import ContentBlock from '@shanedaugherty/react-content-block';

render() {
  return <ContentBlock html={'<div>Any html</div>'} />

With Configuration Example

This library exports a higher-order component that can be used to bind props at runtime.


import { withConfiguration } from '@shanedaugherty/react-content-block';
import { CustomImageComponent, SyntaxHighlighter, Section } from '../components';

export default withConfiguration({
  getProps: (tagname, attributes, instanceData) => {
     switch(tagname) {
       case img: 
         return { srcset: instanceData.imageSizes.map(...) }
  replacements: {
    img: (props) => <CustomImageComponent {...props} />,
    code: (props) => <SyntaxHighlighter {...props} />,
    section: (props) => <Section {...props} />


import ContentBlock from './ContentBlock.jsx';

class Page extends React.Component {
  static state = { 
    html: null, 
    media: null 
  async componentDidMount() {
    const page = await api.getPage('home');
    const { html, media } = page;
    this.setState({ html, media });
  render() {
    const {html, media} = this.state;
    if (!html) return null;
    return (<ContentBlock html={html} data={media} />)



Replacements can be passed to use custom components in place of any html tag.


A function that can be used to provide props to a custom component.


Instance data to be passed to the third parameter of getProps.


A classname to be applied to the wrapper div, can only be used when useWrapper is set to true. type: string default: ContentBlock


When true the content will be wrapped in a div. type: boolean default: false