/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

2 votes132 views2 answers
Add 2 class names react
Javascript React
1 vote124 views1 answer
REACt helmet og tags DONT WORK
Javascript React
0 vote122 views1 answer
React native undedined map
Javascript React
6 votes132 views2 answers
React native password field
Javascript React
17 votes114 views5 answers
How to run react native app
Javascript React
0 vote121 views1 answer
Enzyme-adapter-react-17
Javascript React
-2 votes142 views1 answer
Keyboard close when typing react native
Javascript React
4 votes132 views2 answers
Change the route on button click react
Javascript React
2 votes153 views3 answers
There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you need to fix locally.
Javascript React
0 vote131 views1 answer
React-simple-star-rating
Javascript React