html-reactifier v2.0.2

html-reactifier

This allows you to have arbitrary markup AROUND your React component(s).

pseudo code example usage:

import React from 'react';
import getRenderer from 'html-reactifier';

class RenderContent extends React.component {
	constructor (props) {
		super(props);

		const {template} = props;

		const widgets = this.widgets = {};
		let id = 0;

		//Process the string of html that resembles: <div>{ item.foo }</div>
		template = template.split(/({[^}]+})/).map(v => {
			if(v.startsWith('{') && v.endsWith('}')) {
				//do something with the value...
				widgets[id++] = v; //eg: "{ item.foo }"
				return `<widget id="${id}"/>` //xml placeholder
			}
			return v;
		});

		//can be any criteria... this is just an example...
		const identifyTemplateWidget = tag => tag === 'widget';

		this.state = {
			renderer: getRenderer(template.join(''), identifyTemplateWidget)
		};
	}


	render () {
		const {renderer} = this.state;
		return renderer ? renderer(React, (...args) => this.renderTemplateWidget(...args)) : (
			<div>Processing...</div>
		);
	}


	renderTemplateWidget (tagName, props, children) {
		//this is where you can render what ever you want for the "widget"
		//props will have the id... map it to this.widgets, or index of prop.children, or whatever.
	}
}