A brief tutorial on how to generate an image (JPG or PNG) from a React component . Use case: Sometimes when you have a React project, you want to give users the ability to download an area of your application as image. For example, when you display charts based on data, a user should be able to export the chart as image. In this React tutorial, I want to show you how it works.
First, you have to declare a certain area in your application that should be downloadable as image by using a React ref :
Second, create a button with an event handler where you will implement the logic to download the part of the component as image:
Third, install a library called html2canvas via your command line:
And fourth, use the library to draw the component on a canvas and to transform it into an image:
Thatâs it. If you want to download the image as JPG and not PNG, just exchange jpg with png wherever it is used. If you want to go a bit further and download a PDF instead of an image, then head over to this tutorial: How to create a PDF from a React component .