usescreenshot-react

#usescreenshot-react

React hook allows you to take "screenshots" of webpages or parts of it

Install

Using npm

npm install --save usescreenshot-react

Usage

import React, {useRef} from "react";
import {useScreenshot} from 'usescreenshot-react';

const Example = () => {
    const {image, takeScreenshot, isLoading, isError} = useScreenshot();
    const ref = useRef<HTMLDivElement>(null);

    return isLoading ? (
        <div>Loading...</div>
    ) : (
        <div>
            {isError && <p>Error</p>}
            <div ref={ref}/>
            <h1>Capture Me</h1>
            {image && <img src={image} alt={'Screenshot'}/>}
            <button onClick={() => takeScreenshot(ref.current)}>Take screenshot</button>
        </div>
    );
}

or

import React, {useRef} from "react";
import {useScreenshot} from 'usescreenshot-react';

const Example = () => {
    const {takeScreenshot, isLoading, isError} = useScreenshot();
    const ref = useRef<HTMLDivElement>(null);
    const getImage = () => {
        takeScreenshot(ref.current, {
            backgroundColor: null,
            logging: false,
            scale: 2
        }).then(image => console.log(image));
    }

    return isLoading ? (
        <div>Loading...</div>
    ) : (
        <div>
            {isError && <p>Error</p>}
            <div ref={ref}>
                <h1>Capture Me</h1>
            </div>
            <button onClick={getImage}>Take screenshot</button>
        </div>
    );
}

API

createFileName(extension: string, name?: string): string - return file name. If the name is not specified, then the current date is returned

useScreenshot(type?: string, quality?: number)

• type - String indicating the image format. The default format type is image/png
• quality - A number between 0 and 1

HTMLCanvasElement.toDataURL()

The use useScreenshot hook returns an object containing the following properties:

• image: string | undefined - Screenshot in base64 format
• takeScreenshot = (captureRef: HTMLElement | null, options?: Partial<Options> | undefined) => Promise<string | undefined> - Function for creating screenshot from html node and return screenshot
• isLoading: boolean - Indicates if the screenshot is loading
• isError: boolean - Indicates whether an error occurred during screenshot loading
• clear = (): void - Clear screenshot string

takeScreenshot(captureRef: HTMLElement | null, options?: Partial<Options>)

• captureRef - Ref to the HTMLElement for which to for which the screenshot should be taken
• options - configuration html2canvas options to take a screenshot

License

MIT © n0mver