/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 vote168 views1 answer
Custom login with facebook button react native
Javascript React
4 votes148 views2 answers
Entypo icons react native
Javascript React
6 votes186 views3 answers
Apply required attribute on input using ternary operator using react js
Javascript React
0 vote156 views1 answer
Install react loading spinner
Javascript React
6 votes146 views2 answers
Export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom'
Javascript React
11 votes146 views2 answers
How to add react icons using npm
Javascript React
-1 vote152 views1 answer
React native toggle button with text
Javascript React
18 votes152 views6 answers
Import svg as react component
Javascript React
0 vote148 views1 answer
React modal scroll 2 overlapping components
Javascript React
1 vote181 views2 answers
React native time range picker
Javascript React