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.

ContentBlock.jsx

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} />
  }
})

Page.jsx

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} />)
  }  
}

Props

replacements

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

getProps

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

data

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

className

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

useWrapper

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