Package Exports

use-screenshot-hook

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-screenshot-hook) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.