React Screen Capture | Take Screenshots of Your React App

Capturing React’s App UI Made Easy With react-screen-capture Component

The react-screen-capture component provides an easy way to take screenshots of your React app’s UI. You can capture any part of your app’s screen with just a few lines of code.

Create for React developers who’re building a feedback system where users can report issues with a screenshot, creating a design tool that allows for capturing and editing specific parts of a webpage, or simply integrating a feature in your app for users to share a snapshot of their achievements or customizations.

How to use it:

1. Install and import the react-screen-capture Component.

# Yarn
$ yarn add react-screen-capture

# NPM
$ npm i react-screen-captureimport React from 'react';
import { ScreenCapture } from 'react-screen-capture';

2. Use the component in your app.

class App extends React.Component {
  state = {
    screenCapture: '',
  };
  handleScreenCapture = screenCapture => {
    this.setState({screenCapture});
  };
  handleSave = () => {
    const screenCaptureSource = this.state.screenCapture;
    const downloadLink = document.createElement('a');
    const fileName = 'react-screen-capture.png';
    downloadLink.href = screenCaptureSource;
    downloadLink.download = fileName;
    downloadLink.click();
  };
  render() {
    const { screenCapture } = this.state;
    return (
      <ScreenCapture onEndCapture={this.handleScreenCapture}>
        {({ onStartCapture }) => (
          <div>
            <button onClick={onStartCapture}>Capture</button>
            <center>
              <img src={screenCapture} alt='react-screen-capture' />
              <p>
                {screenCapture && <button onClick={this.handleSave}>Download</button>}
              </p>
            </center>
          </div>
        )}
      </ScreenCapture>
    );
  }
};
export default App;

Preview:

Download Details:

Author: marsinlegend

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/marsinlegend/React-Screen-Capture

License: MIT