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.