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 i react-screen-capture
import 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 => {
  handleSave = () => {
    const screenCaptureSource = this.state.screenCapture;
    const downloadLink = document.createElement('a');
    const fileName = 'react-screen-capture.png';
    downloadLink.href = screenCaptureSource; = fileName;;
  render() {
    const { screenCapture } = this.state;
    return (
      <ScreenCapture onEndCapture={this.handleScreenCapture}>
        {({ onStartCapture }) => (
            <button onClick={onStartCapture}>Capture</button>
              <img src={screenCapture} alt='react-screen-capture' />
                {screenCapture && <button onClick={this.handleSave}>Download</button>}
export default App;


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

Add Comment