/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 vote340 views1 answer
Create app with a specific react version
Javascript React
0 vote347 views1 answer
Reset reactive state vue 3
Javascript React
0 vote317 views1 answer
Render first index active tabs in reactjs
Javascript React
26 votes362 views6 answers
React redirect to url
Javascript React
31 votes338 views3 answers
React mui icons
Javascript React
0 vote344 views1 answer
Smooth scroll react
Javascript React
1 vote325 views1 answer
React native android padding style
Javascript React
0 vote373 views1 answer
Passing argument to function handler functional compoent javascript react
Javascript React
13 votes302 views10 answers
React navigation
Javascript React
0 vote339 views1 answer
React bootstrap button
Javascript React