A Simple Guide to Converting a React Component into an Image

Published on August 10, 2022
Thumbnail

Have you ever needed to generate an image from a React component? In this article, I'll show you a quick and easy approach to do just that. I recently developed a tool for generating student badges, and one of the requirements was the ability to download the badge as an image. Let's dive in!

Step 1: Create a React Component

To begin, let's create a React component that will serve as the basis for our image. In this example, I'll be using Tailwind CSS for styling, but feel free to use any CSS framework or write your own CSS.

export default function Badge() {
  return (
    <div className="flex h-[400px] w-[500px] flex-col items-center justify-center rounded-lg bg-pink-50 p-9">
      <img
        src="https://i.pravatar.cc/150"
        alt="Avatar"
        className="mb-6 rounded-full"
      />
      <div className="mb-6 rounded-full bg-yellow-100 px-3 py-1 text-lg font-bold text-stone-800">
        Student Badge
      </div>
      <div className="mb-6 text-4xl font-bold text-stone-800">
        Mohamed Ouyizme
      </div>
      <div className="text-lg font-bold text-stone-800">2022/2023</div>
    </div>
  )
}
export default function Badge() {
  return (
    <div className="flex h-[400px] w-[500px] flex-col items-center justify-center rounded-lg bg-pink-50 p-9">
      <img
        src="https://i.pravatar.cc/150"
        alt="Avatar"
        className="mb-6 rounded-full"
      />
      <div className="mb-6 rounded-full bg-yellow-100 px-3 py-1 text-lg font-bold text-stone-800">
        Student Badge
      </div>
      <div className="mb-6 text-4xl font-bold text-stone-800">
        Mohamed Ouyizme
      </div>
      <div className="text-lg font-bold text-stone-800">2022/2023</div>
    </div>
  )
}

Step 2: Convert the Component to an Image

To convert our React component into an image, we'll use the dom-to-image package. This package makes the conversion process simple and straightforward. First, let's install dom-to-image.

npm i dom-to-image
npm i dom-to-image

Next, we'll need to get a reference to our component and pass it to the toJpeg function provided by dom-to-image. Replace image-name-here.jpeg with the desired name for your image.

import { useRef } from 'react'
import domtoimage from 'dom-to-image'
 
export default function Badge() {
  const componentRef = useRef()
 
  async function handleDownloadComponentImage() {
    const element = componentRef.current
    const dataUrl = await domtoimage.toJpeg(element)
    const link = document.createElement('a')
 
    link.download = `image-name-here.jpeg`
    link.href = dataUrl
    link.click()
  }
 
  return (
    <div
      ref={componentRef}
      className="flex h-[400px] w-[500px] flex-col items-center justify-center rounded-lg bg-pink-50 p-9"
    >
      {/* ... */}
    </div>
  )
}
import { useRef } from 'react'
import domtoimage from 'dom-to-image'
 
export default function Badge() {
  const componentRef = useRef()
 
  async function handleDownloadComponentImage() {
    const element = componentRef.current
    const dataUrl = await domtoimage.toJpeg(element)
    const link = document.createElement('a')
 
    link.download = `image-name-here.jpeg`
    link.href = dataUrl
    link.click()
  }
 
  return (
    <div
      ref={componentRef}
      className="flex h-[400px] w-[500px] flex-col items-center justify-center rounded-lg bg-pink-50 p-9"
    >
      {/* ... */}
    </div>
  )
}

Finally, you can trigger the handleDownloadComponentImage function when the user clicks a button or performs any other action.

<button onClick={handleDownloadComponentImage}>Download</button>
<button onClick={handleDownloadComponentImage}>Download</button>

And there you have it! You can now download your React component as an image with just a few lines of code. Happy coding!