Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Bunlong/react-screen-capture
A tiny React library allows you to take a snapshot of the webpage's screen or part of the screen.
https://github.com/Bunlong/react-screen-capture
react react-screen-capture reactjs screen-capture
Last synced: 7 days ago
JSON representation
A tiny React library allows you to take a snapshot of the webpage's screen or part of the screen.
- Host: GitHub
- URL: https://github.com/Bunlong/react-screen-capture
- Owner: Bunlong
- License: mit
- Created: 2020-12-20T10:30:46.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-06-29T15:13:38.000Z (over 1 year ago)
- Last Synced: 2024-10-25T19:48:10.747Z (10 days ago)
- Topics: react, react-screen-capture, reactjs, screen-capture
- Language: TypeScript
- Homepage: https://codesandbox.io/s/react-screen-capture-i9f4d
- Size: 54.7 KB
- Stars: 58
- Watchers: 3
- Forks: 24
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome - Bunlong/react-screen-capture - A tiny React library allows you to take a snapshot of the webpage's screen or part of the screen. (TypeScript)
README
⭐️ 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 }) => (
Capture
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 && Download}
)}
);
}
};
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 [](https://opensource.org/licenses/MIT)