Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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, { createRef, useState } from 'react'
import { useScreenshot } from 'use-react-screenshot'

export default () => {
  const ref = createRef(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.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published