Inject a React component into HTML

Question

I am trying to receive a piece of HTML markup from an external source and inject React components into specific parts of it before it gets rendered.

To achieve this I have been playing around with react-html-parser (https://github.com/wrakky/react-html-parser)

I had this example working... although, it feels hacky and cannot possibly the best way to achieve this.

// a simple component
const Image = props => {
    return <img {...props}/>    
};

// this resource comes from an external source and can differ
// ultimately, I would like to be able to target certain elements selecting their data-attributes
// to insert a React component
const externalHTML = '<div class="image"></div>';

// using the react-html-parser library to convert the externalHTML into a React component
const DynamicReactComponent = ReactHtmlParser(externalHTML);

// manually injecting a React component into the dynamically created component
DynamicReactComponent.props.children.push(<Image src="something/anything.jpg" />);

Another example, with a bit more complicated setup;

const externalHTML = '
    <div class="someClass">
        <figure class="image">
            <img src=""/>
            <figcaption></figcaption>
        </figure>
    </div>';

// using the react-html-parser library to convert the externalHTML into a React component
const DynamicReactComponent = ReactHtmlParser(externalHTML);

// way too hacky....
// and it does not fully work
DynamicReactComponent.props.children.map(child => {
    if(typeof child === 'object' && 'type' in child) {
        switch(child.type) {

            case 'img':
                // this cannot be done as it's readonly
                child.props.src = 'something/anything.jpg';
                break;

            case 'figcaption':
                return child.props.children.push(<Text/>)

            default:
        }
    }
});

In this example I wish to add a src to the image element and a caption to the figcaption. The rest of the mark up needs to stay untouched, but should be rendered accordingly. Just to clarify, I have prepared logic to Reactify attributes, e.g. class becomes className.

I know that react-html-parser has a custom way to transform nodes. But this forces me to define in code what the outcome should look like. The HTML I receive from the external source is dynamic and the amount of e.g. div elements (and their attributes) wrapping an image may vary.

I feel a bit lost. What is the best way to achieve this?

Answer 1

You may use ReactDOMServer to inject React elements into HTML markup (ReactDOMServer.renderToString is available in browser too). The step by step algorithm will be:

1) render your React element as a string

2) create a template element and paste loaded HTML into it's innerHTML property (you need template since you want to inject React before HTML will be rendered)

3) inject HTML of React component into specific element inside template

4) render template content on the page

5) hydrate React component if needed

Check this demo on StackBlitz https://stackblitz.com/edit/react-yvncqj