{"id":13455039,"url":"https://github.com/Bunlong/react-screen-capture","last_synced_at":"2025-03-24T07:32:20.051Z","repository":{"id":39636197,"uuid":"323046026","full_name":"Bunlong/react-screen-capture","owner":"Bunlong","description":"A tiny React library allows you to take a snapshot of the webpage's screen or part of the screen.","archived":false,"fork":false,"pushed_at":"2023-06-29T15:13:38.000Z","size":56,"stargazers_count":60,"open_issues_count":7,"forks_count":24,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-10T07:06:13.382Z","etag":null,"topics":["react","react-screen-capture","reactjs","screen-capture"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/react-screen-capture-i9f4d","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Bunlong.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-20T10:30:46.000Z","updated_at":"2024-12-12T19:10:17.000Z","dependencies_parsed_at":"2024-06-18T15:36:43.277Z","dependency_job_id":"49e73edf-37ce-4aac-b3fa-016835b92a34","html_url":"https://github.com/Bunlong/react-screen-capture","commit_stats":{"total_commits":20,"total_committers":3,"mean_commits":6.666666666666667,"dds":0.09999999999999998,"last_synced_commit":"92eada9400027860f75f84230df6eab6ec7a20b5"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bunlong%2Freact-screen-capture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bunlong%2Freact-screen-capture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bunlong%2Freact-screen-capture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bunlong%2Freact-screen-capture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bunlong","download_url":"https://codeload.github.com/Bunlong/react-screen-capture/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245227562,"owners_count":20580898,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-screen-capture","reactjs","screen-capture"],"created_at":"2024-07-31T08:01:00.561Z","updated_at":"2025-03-24T07:32:19.778Z","avatar_url":"https://github.com/Bunlong.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  ⭐️ Please support us by giving a star! Thanks! ⭐️\n\u003c/p\u003e\n\n# react-screen-capture\n\nA tiny React library allows you to take a snapshot of the webpage's screen or part of the screen.\n\n### 💻 Live [Demo](https://codesandbox.io/s/react-screen-capture-i9f4d)\n\n## 🎁 Features\n\n* Easy to use\n* Compatible with both JavaScript and TypeScript\n* Take a snapshot of the webpage's screen or part of the screen\n\n## 🔧 Install\n\nreact-screen-capture is available on npm. It can be installed with the following command:\n\n```\nnpm install react-screen-capture --save\n```\n\nreact-screen-capture is available on yarn as well. It can be installed with the following command:\n\n```\nyarn add react-screen-capture\n```\n\n## 🔰 Callbacks\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eCallback\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eonStartCapture\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e() =\u003e null\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eTo start capture webpage's screen.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eonEndCapture\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e(base64Source: string) =\u003e null\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eTo end capture webpage's screen and get base64 source.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## 💡 Usage\n\n```jsx\nimport React from 'react';\nimport { ScreenCapture } from 'react-screen-capture';\n\nclass App extends React.Component {\n  state = {\n    screenCapture: '',\n  };\n\n  handleScreenCapture = screenCapture =\u003e {\n    this.setState({screenCapture});\n  };\n\n  handleSave = () =\u003e {\n    const screenCaptureSource = this.state.screenCapture;\n    const downloadLink = document.createElement('a');\n    const fileName = 'react-screen-capture.png';\n\n    downloadLink.href = screenCaptureSource;\n    downloadLink.download = fileName;\n    downloadLink.click();\n  };\n\n  render() {\n    const { screenCapture } = this.state;\n\n    return (\n      \u003cScreenCapture onEndCapture={this.handleScreenCapture}\u003e\n        {({ onStartCapture }) =\u003e (\n          \u003cdiv\u003e\n            \u003cbutton onClick={onStartCapture}\u003eCapture\u003c/button\u003e\n            \u003cp\u003e\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam\n              distinctio exercitationem a tempore delectus ducimus necessitatibus\n              dolor voluptatum aut est quaerat aspernatur, vero quod aperiam odio.\n              Exercitationem distinctio in voluptates?\n            \u003c/p\u003e\n            \u003cp\u003e\n              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut molestiae\n              deserunt voluptas, labore a expedita error eligendi sunt fugit, nesciunt\n              ullam corrupti quas natus, officia rerum? Officia cum amet quidem.\n            \u003c/p\u003e\n            \u003cp\u003e\n              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat, iusto\n              repellat quae quos in rerum sunt obcaecati provident placeat hic saepe\n              possimus eaque repellendus consequuntur quisquam nihil, sit ullam\n              ratione.\n            \u003c/p\u003e\n            \u003ccenter\u003e\n              \u003cimg src={screenCapture} alt='react-screen-capture' /\u003e\n              \u003cp\u003e\n                {screenCapture \u0026\u0026 \u003cbutton onClick={this.handleSave}\u003eDownload\u003c/button\u003e}\n              \u003c/p\u003e\n            \u003c/center\u003e\n          \u003c/div\u003e\n        )}\n      \u003c/ScreenCapture\u003e\n    );\n  }\n};\n\nexport default App;\n```\n\n## 📜 Changelog\n\nLatest version 1.1.1 (2023-06-29):\n\n  * Fix break screens above 1080 pexels\n\nDetails changes for each release are documented in the [CHANGELOG.md](https://github.com/Bunlong/react-screen-capture/blob/master/CHANGELOG.md).\n\n\n## ❗ Issues\n\nIf 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.\n\n## 🌟 Contribution\n\nWe'd love to have your helping hand on contributions to `react-screen-capture` by forking and sending a pull request!\n\nYour contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)\n\nHow to contribute:\n\n- Open pull request with improvements\n- Discuss ideas in issues\n- Spread the word\n- Reach out with any feedback\n\n## 🏆 Contributors\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/Bunlong\"\u003e\n        \u003cimg src=\"https://avatars0.githubusercontent.com/u/1308397?s=400\u0026u=945dc6b97571e2b98b659d34b1c81ae2514046bf\u0026v=4\" width=\"100\" alt=\"Bunlong\" /\u003e\n        \u003cbr /\u003e\n        \u003csub\u003e\n          \u003cb\u003eBunlong\u003c/b\u003e\n        \u003c/sub\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/MarkusHobisch\"\u003e\n        \u003cimg src=\"https://avatars.githubusercontent.com/u/5236603?v=4\" width=\"100\" alt=\"Markus Hobisch\" /\u003e\n        \u003cbr /\u003e\n        \u003csub\u003e\n          \u003cb\u003eMarkus Hobisch\u003c/b\u003e\n        \u003c/sub\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/akashkhudia\"\u003e\n        \u003cimg src=\"https://avatars.githubusercontent.com/u/29786275?v=4\" width=\"100\" alt=\"Akash Khudia\" /\u003e\n        \u003cbr /\u003e\n        \u003csub\u003e\n          \u003cb\u003eAkash Khudia\u003c/b\u003e\n        \u003c/sub\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## ⚖️ License\n\nThe MIT License [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBunlong%2Freact-screen-capture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBunlong%2Freact-screen-capture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBunlong%2Freact-screen-capture/lists"}