/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

6 votes208 views1 answer
React dictionary key value avec 2 variable
Javascript React
0 vote211 views1 answer
React native onChangeText resize the background image
Javascript React
0 vote167 views1 answer
React google login button size increase
Javascript React
4 votes178 views2 answers
React input number
Javascript React
15 votes189 views2 answers
React native get location
Javascript React
0 vote297 views1 answer
React big calendar messages
Javascript React
1 vote203 views1 answer
Inject Javascript Function not working in Android React Native WebView but work fine in iOS React Native
Javascript React
0 vote257 views1 answer
Scrollbar automatically scroll down as new divs are added reactjs
Javascript React
2 votes256 views1 answer
React router 6 navigate
Javascript React
14 votes142 views1 answer
Change checkbox value react
Javascript React