⭐️ 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](https://codesandbox.io/s/react-screen-capture-i9f4d) ## 🎁 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
Callback Type Description
onStartCapture () => null To start capture webpage's screen.
onEndCapture (base64Source: string) => null To end capture webpage's screen and get base64 source.
## 💡 Usage ```jsx 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 ( {({ onStartCapture }) => (

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.

react-screen-capture

{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](https://github.com/Bunlong/react-screen-capture/blob/master/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
Bunlong 		Markus Hobisch
Markus Hobisch 		Akash Khudia
Akash Khudia
## ⚖️ License The MIT License [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)