how to convert react component to image

Tired Tiger answered on May 13, 2021 Popularity 10/10 Helpfulness 3/10

answer how to convert react component to image

how to convert react component to image

Comment

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>
   );
 }
}

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: www.npmjs.com

Tags: image javascript react-component

Link to this answer
Share Copy Link

Contributed on May 13 2021

Tired Tiger

0 Answers Avg Quality 2/10

how to convert react component to image

Contents

More Related Answers

how to convert react component to image

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.