⭐️ 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.

{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

_{Markus Hobisch}

_{Akash Khudia}

## ⚖️ License The MIT License [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

	Stars	Issues	Version	Updated	Created
html-pdf			3.0.1	3 years ago	10 years ago
pdfmake	11,355	341	0.2.10	2 months ago	10 years ago
react-pdf-js	693	17	5.1.0	5 years ago	8 years ago
react-pdfjs	82	2	1.0.7	8 years ago	8 years ago
react-screen-capture			1.1.1	a year ago	3 years ago

html-pdf vs pdfmake vs react-pdf-js vs react-pdfjs vs react-screen-capture

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past