Problems using html-to-image in a React application

Question

I am trying to use html-to-image to create a downloadable image of a specific html card. In its documentation it specifies to use

var node = document.getElementById('my-node');
htmlToImage.toPng(node)...

But this works on real DOM and not in react. I tried using refs but its unfruitful. The card and the download button is in different branches in Component Hierarchy.

If you past your Component, i could give you a hint – Achraf C. Jun 05 '19 at 13:08 — Achraf C., Jun 05 '19 at 13:08

score 3 · Accepted Answer · answered Jun 05 '19 at 13:07

3

Have you tried using the new React Ref

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

In order to access the element, use:

const node = this.myRef.current;

answered Jun 05 '19 at 13:07

Achraf C.

427
3
11

can you please explain it more . – Dafy Jun 21 '20 at 21:14

Problems using html-to-image in a React application

1 Answers1