redux code:

Here is the full code that I had to use in my react/redux application.

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import {Provider} from 'react-redux';

...

class ParentComponent extends React.Component {

    ...

    getHtml(config) {
        const {classes, children} = config
        return ReactDOMServer.renderToStaticMarkup(
            <Provider store={this.context.store}>
                <ChildComponent classes={classes}>{children}</ChildComponent>
            </Provider>
        )
    }
}

ParentComponent.contextTypes = { store: React.PropTypes.object };

Notes:

• Use ReactDOMServer.renderToStaticMarkup() to get the HTML code
• Specify ParentComponent.contextTypes to make this.context.store available
• Need to wrap the ChildComponent in a Provider so it has access to the redux store.

Question might be old, but while looking for a solution for this I found an elegant way to render a hidden element as an image.

render() {
    return (
        <div>
            <div
                id="image-template"
                className="d-none"
                style={{
                    width: "200px",
                    height: "200px",
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    color: "white",
                    fontSize: "10px",
                    textAlign: "center",
                    backgroundColor: "green",
                }}
            >
                <span style={{ margin: "20px" }}>{"Hey, an image rendered but not visible!"}</span>
            </div>
        </div>
    );
}

With the class d-none (from bootstrap) the element is hidden to the user, so it does not matter where you place it. d-none in bootstrap is basically display: none !important;.

Now add a function to create an image:

async createImage() {
    const template = document.getElementById("image-template").cloneNode(true);
    template.classList.remove("d-none");

    const base64Image = await htmlToImage.toPng(template, {
        height: 200,
        width: 200,
    });
    // Do whatever you want to do with your image
}

The element is cloned and the d-none/display: none removed to be able to render it with htmlToImage. The result is the base64 data you can use whereever you want.