posthtml-static-react

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

Basic usage

1var React = require("react");
2var posthtml = require("posthtml");
3var renderStaticReact = require("posthtml-static-react");
4
5var html = "<my-custom-element></my-custom-element>";
6
7var MyCustomElement = function (props) {
8	return (
9		<div className="my-custom-element"></div>
10	);
11};
12
13var components = {
14	"my-custom-element": MyCustomElement;
15};
16
17posthtml()
18	.use(renderStaticReact("my-custom-element", components))
19	.process(html)
20	.then(function (result) {
21		console.log(result.html);
22		// "<div class=\"my-custom-element\"></div>"
23	});

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.