/Javascript/React/How to convert react component to image

How to convert react component to image

import { exportComponentAsJPEG, exportComponentAsPDF, exportComponentAsPNG } from 'react-component-export-image';
import React from 'react';

class ComponentToPrint extends React.Component {
 render() {
   return <div>Hello World</div>;
 }
}
export default class MyComponent extends React.Component {
 constructor(props) {
   super(props);
   this.componentRef = React.createRef();
 }

 render() {
   return (
     <React.Fragment>
       <ComponentToPrint ref={this.componentRef} />
       <button onClick={() => exportComponentAsJPEG(this.componentRef)}>
         Export As JPEG
       </button>
       <button onClick={() => exportComponentAsPDF(this.componentRef)}>
         Export As PDF
       </button>
       <button onClick={() => exportComponentAsPNG(this.componentRef)}>
         Export As PNG
       </button>
     </React.Fragment>
   );
 }
}

Source: npmjs.com

Similar codes

0 vote274 views1 answer
What is the difference between throttling and debounce and raf throttling in react
Javascript React
41 votes185 views4 answers
On click copy to clipboard react
Javascript React
0 vote279 views3 answers
SyntaxError: /mnt/c/myAppFile/hello-rails-react/app/javascript/components/Greeting.js: Support for the experimental syntax 'jsx' isn't currently enabled rails
Javascript React
0 vote295 views2 answers
React particles react
Javascript React
1 vote191 views1 answer
React why onclick property function trigger without click
Javascript React
1 vote215 views1 answer
Reactnavigation 5 hide header
Javascript React
0 vote229 views1 answer
React-template-helper
Javascript React
0 vote244 views1 answer
Render eror cant find variable: react
Javascript React
0 vote206 views1 answer
React Redux reducer combineReducers exemple
Javascript React
1 vote202 views2 answers
History react router
Javascript React