posthtml-static-react

A PostHTML plugin to render custom elements as static React components.

Basic usage

var React = require("react");
var posthtml = require("posthtml");
var renderStaticReact = require("posthtml-static-react");

var html = "<my-custom-element></my-custom-element>";

var MyCustomElement = function (props) {
	return (
		<div className="my-custom-element"></div>
	);
};

var components = {
	"my-custom-element": MyCustomElement
};

posthtml()
	.use(renderStaticReact("my-custom-element", components))
	.process(html)
	.then(function (result) {
		console.log(result.html);
		// "<div class=\"my-custom-element\"></div>"
	});

Note: If you use JSX syntax (as the example above) you will need to transform your scripts - either precompile with babel or at runtime with babel-node. YMMV.

Arguments

• matcher (string|object|array) - Accepts a matcher argument just like posthtml match - or a CSS selector string (which will be turned into at matcher object via posthtml-match-helper).
• components (object) - A map of the custom element names used in your HTML and the React components you want to render them as.

Returns

A configured plugin ready to use with PostHTML.