How to capture a screenshot of a specific component in a React application using Chakra UI?

Question

I'm working on a React application that uses Chakra UI and I'm trying to capture a screenshot of a specific component (a modal) when a button is clicked. I've tried using libraries like html2canvas and html-to-image but I'm encountering issues.

Here's the code for the component I'm trying to capture:

<ModalContent
  bg="linear-gradient(to bottom right, #2C2E4A, #1E1F32)"
  paddingInline="1rem"
>
  <ModalHeader w="100%" m="auto" paddingBlock="2rem" paddingInline="0">
    <Text
      textAlign="center"
      fontSize="1.5rem"
      fontWeight="bold"
      paddingBottom="1rem"
    >
      {buildTitle}
    </Text>

    <Image
      w="100%"
      borderRadius=".3rem"
      src={selectedHero?.banner || ''}
    />
  </ModalHeader>
  <ModalCloseButton />
  <ModalBody
    flexDir="column"
    w="100%"
    h="100%"
    bg="#1E1F33"
    boxShadow="5px 5px 16px rgba(0, 0, 0, .2) inset"
    borderRadius=".3rem"
    sx={{
      '::-webkit-scrollbar': {
        width: '8px',
      },
      '::-webkit-scrollbar-thumb': {
        background: 'palette.accent',
      },
    }}
  >
    {/..more code... */}

    <Button onClick={() => {
      console.log(document.getElementById('build-confirmation'));
      captureScreenshot('build-confirmation');
    }}>Capture Screenshot</Button>

  </ModalBody>
</ModalContent>

And here's the code for the custom hook I'm using to capture the screenshot:

enter image description here

Does anyone know how I can capture a screenshot of this specific component in my React application?

I've tried several approaches to solve this, including:

1. Using a useRef to get a reference to the element and pass this to the screenshot function.
2. Adding a delay before calling the screenshot function to give the element time to render.
3. Checking if the element is visible in the DOM before calling the screenshot function.

When I click the button to capture the screenshot, I get an error saying that the element is not found. I believe this is because the element is not yet rendered or is not visible in the DOM when the screenshot function is called. The button just doesn't work at all

However, none of these approaches have worked. I'm not using Next.js or HTML, just React, Chakra UI, and Node.js.

Answer 1

I am using html-to-image to screenshot the React component by passing a ref. It works for me, not sure what issues you're facing. I am sharing here my code, hopefully it helps.

import * as htmlToImage from "html-to-image";

const createFileName = (extension = "", ...names) => {
  if (!extension) {
    return "";
  }
  return `${names.join("")}.${extension}`;
};

export const downloadFile = (image, { name = "meme-shot", extension = "jpg" } = {}) => {
  const a = document.createElement("a");
  a.href = image;
  a.download = createFileName(extension, name);
  a.click();
};

//... inside of your component
const screenshotArea = useRef(null);


const handleMemeDownload = async () => {
  if (!screenshotArea.current) return;
  await htmlToImage.toJpeg(screenshotArea.current).then(downloadFile);
  alert("Meme saved as meme-shot.jpg");
};


return (
  <div>
    <div ref={screenshotArea}>Content</div>
    <button onClick={handleMemeDownload}>Download</button>
  </div>  
)