I haven't done this with React, but it seems fairly easy depending on what you're trying to achieve.
Render the React components, copy the HTML, then apply into new file with any styles needed. Ideally don't use a system like CSS in JS, since you want to retain the exact class names when you render React. But it shouldn't matter if you add the PDF converter to the same page.
class Hello extends React.Component {
componentDidMount() {
// Activate global function that runs HTML2Canvas
if(window.convertPDF) {
}
// Optionally: Grab the outer HTML
const html = document.getElementById('copy').outerHTML;
console.log(html)
document.getElementById('html').textContent = html
}
render() {
return <div className="hello">Hello {this.props.name}</div>;
}
}
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
You can see my example live here
You can have your React component trigger a global function that activates the HTML to Canvas once the React components have completed rendering.
Ideally you can just use HTML2Canvas on the rendered React components.
If you have an issue, you can copy the entire HTML of the React App (as a kind of snapshot or cache), insert that HTML back into the page somewhere, and then hide the React App (add a CSS class to display:none). That way if the React app re-renders for some reason - it's hidden away, and HTML2Canvas has static HTML to convert.