Is it correct to use dom-to-image module in reactjs app?

Question

I'm working on a custom component in reactjs. I want to add a feature to export component as an image and PDF. Is it correct to use dom-to-image module in react? because it working with real DOM and react working with virtual DOM and i don't know maybe there are some conflicts or some performance issues. if it's wrong please give me solution.

Answer 1

You can use refs to refer to react dom element and then parse the dom element to dom-to-html functions

Example :

class MyComponent extends React.Component {
    constructor(props) {
       super(props);
       this.myRef = React.createRef();
    }
    render() {
       return <div ref={this.myRef} />;
    }
}

And to access the element

JS way : let node = document.getElementByID('some-id')

React way : let node = this.myRef.current

Now pass node to dom-to-image functions like in its documentations.

PS : Set the ref to some state/store variable to access it anywhere in application.

Answer 2

React does eventually render into the regular DOM as regular DOM elements. There may be a react specific way to do this but dom-to-image should work.