raw-html-react v1.2.3

Inspired by Sethorax/react-html-converter and aknuds1/html-to-react.

A React component that converts raw HTML to React components.

On the client, no additional dependencies are used beyond React. Cheerio is used for rendering static elements for server-side rendered applications.

This is useful for rending React components from a headless CMS in client side react applications.

Install

yarn add raw-html-react

or

npm install raw-html-react

Example

import React from 'react';
import ReactHtml from 'raw-html-react';
import MyComponent from '../components/MyComponent';

class Example extends React.Component {
  render() {
    const html = `<div data-react-component="MyComponent"></div>`;
    return <ReactHtml html={html} componentMap={{ MyComponent }} />;
  }
}

API

<ReactHtml>

This component takes raw html as text and renders react components.

Props

type ReactHtmlProps = {
  html: String,
  componentMap: Object,
  componentAttribute?: String,
  propsAttribute?: String,
  contextWrapper?: React.Node,
  onServerRender?: Function
};

HTML Attributes

data-react-component="string"

data-react-props="JSON"

Sets the props that will be passed to the react component. (JSON format)

Constructor takes plain JSON object where the key is the value to be used in data-react-component attributes and the value is the reference to the actual react component.