⭐️ Please support us by giving a star! Thanks! ⭐️

react-screen-capture

A tiny React library allows you to take a snapshot of the webpage's screen or part of the screen.

💻 Live Demo

🎁 Features

• Easy to use
• Compatible with both JavaScript and TypeScript
• Take a snapshot of the webpage's screen or part of the screen

🔧 Install

react-screen-capture is available on npm. It can be installed with the following command:

npm install react-screen-capture --save

react-screen-capture is available on yarn as well. It can be installed with the following command:

yarn add react-screen-capture

🔰 Callbacks

💡 Usage

import React from 'react';
import { ScreenCapture } from 'react-screen-capture';

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 }) => (



            <button onClick={onStartCapture}>Capture</button>



              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam
              distinctio exercitationem a tempore delectus ducimus necessitatibus
              dolor voluptatum aut est quaerat aspernatur, vero quod aperiam odio.
              Exercitationem distinctio in voluptates?






              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut molestiae
              deserunt voluptas, labore a expedita error eligendi sunt fugit, nesciunt
              ullam corrupti quas natus, officia rerum? Officia cum amet quidem.






              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat, iusto
              repellat quae quos in rerum sunt obcaecati provident placeat hic saepe
              possimus eaque repellendus consequuntur quisquam nihil, sit ullam
              ratione.






              <img src={screenCapture} alt='react-screen-capture' />



                {screenCapture && <button onClick={this.handleSave}>Download</button>}









        )}
      </ScreenCapture>
    );
  }
};

export default App;

📜 Changelog

Latest version 1.1.1 (2023-06-29):

• Fix break screens above 1080 pexels

Details changes for each release are documented in the CHANGELOG.md.

❗ Issues

If you think any of the react-screen-capture can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.

🌟 Contribution

We'd love to have your helping hand on contributions to react-screen-capture by forking and sending a pull request!

Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)

How to contribute:

• Open pull request with improvements
• Discuss ideas in issues
• Spread the word
• Reach out with any feedback

🏆 Contributors

Bunlong

Markus Hobisch

Akash Khudia

⚖️ License

The MIT License