Create react screenshot

React hook which allows you to make component screenshot and get an image in different extensions.

Install

Note, this package has as peerDependencies: react and html2canvas. As we assume that you already have react installed, you can just install html2canvas.

To install package run:

npm install --save use-react-screenshot

To install peerDependencies run:

npm install --save react html2canvas

Examples

See this codesandbox playground or /example folder if you want to play with hook.

In the following example you can find examples of:

• Taking screenshot and placing it in your page
• Downloaded screenshoted part
• How to use different extensions (see components/Download.js page)

Usage

A simple example which allows you to take a screenshot and place it as an image on the page (also you can download it or use differently, see examples section above).

import React, { useRef, useState } from 'react'
import { useScreenshot } from 'use-react-screenshot'

export default () => {
  const ref = useRef(null)
  const [image, takeScreenshot] = useScreenshot()
  const getImage = () => takeScreenshot(ref.current)
  return (
    <div>
      <div>
        <button style={{ marginBottom: '10px' }} onClick={getImage}>
          Take screenshot
        </button>
      </div>
      <img width={width} src={image} alt={'Screenshot'} />
      <div ref={ref}>
        <h1>use-react-screenshot</h1>
        <p>
          <strong>hook by @vre2h which allows to create screenshots</strong>
        </p>
      </div>
    </div>
  )
}

License

MIT © vre2h

This hook is created using create-react-hook.