fayeed / use-screenshot

React hook to take screenshot for React components.

use-screenshot-hook

React hook to take screenshot for React components.

Install

Using npm:

npm install --save use-screenshot-hook

Using yarn:

yarn add use-screenshot-hook

Usage

import * as React from "react";

import { useScreenshot } from "use-screenshot-hook";

const Example = () => {
  const { image, takeScreenshot } = useScreenshot();
  return (
    <div>
      <h1>Hello World!</h1>
      <button onClick={() => takeScreenshot()}>screenshot</button>
      {image && <img src={img} />}
    </div>
  );
};

API

UseScreenshot(options: UseScreenshotProps): UseScreenshotReturnType

UseScreenshotProps

• ref - Ref to the component for which the screenshot should be taken. If no ref is taken it will take the screenshot for the topmost div or body.

UseScreenshotReturnType

• isLoading - Indicates if the screenshot is loading this is useful for some webpages that are big and have lots of content to render.
• takeScreenshot: (types: ImgType, options: OptionsType): string | undefined - A function to take screenshot.
• image - Contains the dataUrl for the image.
• clear() - Clear the image from the memory.

Live Demo

Found this project useful? ❤️

If you found this project useful, then please consider giving it a ⭐️ on Github and sharing it with your friends via social media.

Issues and feedback 💭

If you have any suggestion for including a feature or if something doesn't work, feel free to open a Github issue for us to have a discussion on it.

License

MIT © fayeed

---

This hook is created using create-react-hook.

use-screenshot's Issues

Screenshots using the use-screenshot-hook method

Could not take screenshots using the use-screenshot-hook method in react-apexcharts. Got an error please send the solutions.

capture screenshot for particular div

how to capture screenshot for particular div in react

I am getting a blank screenshot.

Whenever I use this plugin to take a screenshot, I always get a blank screenshot.

I am using the example code, but still, it is not working on my website, This is my code.

import React, { createRef } from "react";
// import Text from "./Text";
import { useScreenshot, createFileName } from "use-react-screenshot";

export default () => {
    const ref = createRef(null);
    const [image, takeScreenShot] = useScreenshot({
        type: "image/jpeg",
        quality: 1.0
    });

    const download = (image, { name = "img", extension = "jpg" } = {}) => {
        const a = document.createElement("a");
        a.href = image;
        a.download = createFileName(extension, name);
        a.click();
    };

    const downloadScreenshot = () => takeScreenShot(ref.current).then(download);

    return (
        <div>
            <button onClick={downloadScreenshot}>Download screenshot</button>
            <div
                ref={ref}
                style={{
                    border: "1px solid #ccc",
                    padding: "10px",
                    marginTop: "20px"
                }}
            >
                Hellow World
            </div>
        </div>
    );
};

Masked image in not rendering in a screenshot using css properties

well, I am trying to take a screenshot of a particular div/component that contains a layered/masked image using usescreenshot in react, though I am only getting the color of the topmost layer that i am dynamically changing using color picker, what i actually want is to change the color of a car's body, tyre and rim using color picker and then take a screenshot of my color choice but i am unable to find a direction how to resolve?
const generateImgRef = useRef(null);
<button onClick={() => exportAsImage(generateImgRef.current, "test")}>

NPM has the wrong links

https://www.npmjs.com/package/use-screenshot-hook links to https://github.com/fayeed/use-screenshot-hook instead of https://github.com/fayeed/use-screenshot

How to handle it for multiple div?

I have 4 div inside one div, I want to take 4 different screenshot for those div

TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

const ref = createRef()
const { image, takeScreenshot } = useScreenshot({ ref: ref })

return(
  <div ref={ref as React.RefObject<HTMLDivElement>}>
    {selectedItem && (
      <>
        <img
          className={`
                  ${css({
                    objectFit: 'cover',
                    objectPosition: 'center',
                    maxWidth: '100%',
                  })}
                  h-100
                `}
          src={getImage(selectedItem.images['3x']) || ''}
          alt={'img'}
        />
        <button onClick={() => takeScreenshot()}>TouchMe</button>
      </>
    )}
  </div>
)

It is returning the error TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

I think this error is because I am using nextJS.

Getting document.getElementById('root') is getting null, we should get document.getElementById('__next'), then, we can improve the library sending a new param with the id we want to get like as "root" in the useScreenShot() function or if it is returning null check with the first "root", try with "__next".

Not working on Safari?

I was unable to get this to work on Safari; however it did work on Chrome for Mac. Is that a known issue?

TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
at px (index.es.js?2c84:170:1)
at Object.getNodeWidth (index.es.js?2c84:174:1)
at getImageSize (index.es.js?2c84:800:1)
at toSvgDataURL (index.es.js?2c84:806:1)
at toCanvas (index.es.js?2c84:816:1)
at toPng (index.es.js?2c84:847:1)
at eval (index.es.js?2c84:897:1)
at step (index.es.js?2c84:50:1)
at Object.eval [as next] (index.es.js?2c84:31:46)
at eval (index.es.js?2c84:24:1)
at new Promise ()
at __awaiter (index.es.js?2c84:20:1)
at eval (index.es.js?2c84:882:65)
at onClick (Third.tsx?bc39:427:32)
at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:3994:1)
at invokeGuardedCallback (react-dom.development.js?61bb:4056:1)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?61bb:4070:1)
at executeDispatch (react-dom.development.js?61bb:8243:1)
at processDispatchQueueItemsInOrder (react-dom.development.js?61bb:8275:1)
at processDispatchQueue (react-dom.development.js?61bb:8288:1)
at dispatchEventsForPlugins (react-dom.development.js?61bb:8299:1)
at eval (react-dom.development.js?61bb:8508:1)
at batchedEventUpdates$1 (react-dom.development.js?61bb:22396:1)
at batchedEventUpdates (react-dom.development.js?61bb:3745:1)
at dispatchEventForPluginEventSystem (react-dom.development.js?61bb:8507:1)
at attemptToDispatchEvent (react-dom.development.js?61bb:6005:1)
at dispatchEvent (react-dom.development.js?61bb:5924:1)
at unstable_runWithPriority (scheduler.development.js?3069:468:1)
at runWithPriority$1 (react-dom.development.js?61bb:11276:1)
at discreteUpdates$1 (react-dom.development.js?61bb:22413:1)
at discreteUpdates (react-dom.development.js?61bb:3756:1)
at dispatchDiscreteEvent (react-dom.development.js?61bb:5889:1)

Taking screenshot of special node

I want to take screenshot of a special div in my page.

Can I do that using this library?

Screenshot for scrollable div

I have a scrollable div, that I pass ref in to it, but it only takes the screenshot from the top part of the div, and I want it to take the screenshot of the full height.
Is this possible?