4.0.0 • Published 12 months ago

use-react-screenshot v4.0.0

Weekly downloads
455
License
MIT
Repository
github
Last release
12 months ago

Create react screenshot

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

NPM JavaScript Style Guide Maintainability

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.