react-screen-capture
v1.1.1TypeScript
A tiny React library allows you to take a snapshot of the webpage's screen or part of the screen.
0/weekUpdated 2 years agoMITUnpacked: 420.0 KB
Published by Bunlong
npm install react-screen-capture
⭐️ 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.
$3
🎁 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.
❗ 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 