Save React Component as png, jpeg, or PDF

Eli Elad Elrom
Master React
Published in
3 min readFeb 6, 2022

--

Simple but useful functionality to have when creating React components is the ability to save a component as an image or as a PDF.

Sure your users can just take a screenshot of the current screen or you could just add a window.print,

<button type="button" onClick={() => {
window.print();
}}>Print</button>

however, adding a png, jpeg, or better yet pdf to the app menu makes it more convenient for the users or for some less savvy users that don’t know how to save images.

In this tutorial, I will be showing you how to save your React component as png, jpeg, or PDF.

Libraries in usage;

Install;

$ yarn add html-to-image
$ yarn add react-to-pdf

If you use TS there is no @types/react-to-pdf at the time of writing so, add;

react-to-pdf.d.ts

declare module 'react-to-pdf';

MyWidget.tsx

--

--