posthtml-static-react

    1.0.1 • Public • Published

    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.

    Install

    npm i posthtml-static-react

    DownloadsWeekly Downloads

    0

    Version

    1.0.1

    License

    ISC

    Last publish

    Collaborators

    • rasmusfl0e