{"id":17032391,"url":"https://github.com/abians/react-component-screenshot","last_synced_at":"2026-02-07T22:01:23.497Z","repository":{"id":244537724,"uuid":"815566060","full_name":"AbianS/react-component-screenshot","owner":"AbianS","description":"Effortlessly capture and save high-quality screenshots of your React components with this lightweight tool.","archived":false,"fork":false,"pushed_at":"2024-06-15T13:42:38.000Z","size":103,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-09T14:21:18.199Z","etag":null,"topics":["component","html2canvas","react","react-component-screenshot","react-screenshot","react-screenshot-component","screenshot","screenshot-react-component"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-component-screenshot","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/AbianS.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2024-06-15T13:42:35.000Z","updated_at":"2024-08-25T12:11:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"7be98af4-2cfd-4a0f-9759-b232624d1785","html_url":"https://github.com/AbianS/react-component-screenshot","commit_stats":null,"previous_names":["abians/react-component-screenshot"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AbianS/react-component-screenshot","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbianS%2Freact-component-screenshot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbianS%2Freact-component-screenshot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbianS%2Freact-component-screenshot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbianS%2Freact-component-screenshot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AbianS","download_url":"https://codeload.github.com/AbianS/react-component-screenshot/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbianS%2Freact-component-screenshot/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29209827,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-07T21:35:21.898Z","status":"ssl_error","status_checked_at":"2026-02-07T21:35:20.106Z","response_time":63,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["component","html2canvas","react","react-component-screenshot","react-screenshot","react-screenshot-component","screenshot","screenshot-react-component"],"created_at":"2024-10-14T08:28:19.674Z","updated_at":"2026-02-07T22:01:23.491Z","avatar_url":"https://github.com/AbianS.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n\tReact Component Screenshot\u003c/br\u003e\n\t\u003ca href=\"https://www.npmjs.org/package/react-component-screenshot\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-component-screenshot.svg?style=flat\" alt=\"npm\"\u003e\u003c/a\u003e \u003ca href=\"https://travis-ci.org/developit/react-component-screenshot\"\u003e\u003cimg src=\"https://travis-ci.org/developit/react-component-screenshot.svg?branch=master\" alt=\"travis\"\u003e\u003c/a\u003e \u003ca href=\"https://licenses.dev/npm/react-component-screenshot\"\u003e\u003cimg src=\"https://licenses.dev/b/npm/react-component-screenshot\" alt=\"licenses\" /\u003e\u003c/a\u003e\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003eReact component to take \u003cb\u003escreenshot of the component\u003c/b\u003e.\u003c/p\u003e\n\n---\n\n## ✨ Features\n\n- 📸 **Take Screenshot**: Take screenshot of the component.\n- 📦 **Lightweight**: Only 1KB gzipped.\n- 🌐 **Cross Browser**: Works in all modern browsers.\n- 🛠 **Easy to Use**: Just wrap your component with `Screenshot` component.\n- 📜 **Typescript**: Written in typescript.\n\n## 🔧 Installation\n\n```sh\nnpm install react-component-screenshot\n```\n\nPeer dependencies: `react`, `html2canvas`.\n\n```sh\nnpm install react html2canvas --save\n```\n\n## 🚀 Usage\n\n### 📋 Basic Usage\n\nWrap your component with `ScreenShot` component and pass the `controller` prop.\n\n```tsx\nimport { ScreenShotController, ScreenShot } from 'react-component-screenshot';\n\nexport function Example() {\n  // Create a controller\n  const controller = new ScreenShotController();\n\n  const takeCapture = () =\u003e {\n    // Capture and save the screenshot\n    controller.captureAndSave({\n      name: 'my-awesome-component',\n      extension: 'jpg',\n      type: 'image/jpeg',\n      quality: 1\n    });\n  };\n\n  // Wrap your component with ScreenShot component and pass the controller\n  return (\n    \u003cScreenShot controller={controller}\u003e\n      \u003cdiv className=\"flex flex-col gap-2\"\u003e\n        \u003ch1\u003eMy awesome Component\u003c/h1\u003e\n        \u003cp\u003eSome content\u003c/p\u003e\n        \u003cbutton onClick={takeCapture}\u003etake Capture\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/ScreenShot\u003e\n  );\n}\n```\n\n### 🔍 Getting the Image as Base64\n\nIf you prefer to obtain the image as a base64 string, it's also very easy. 🚀 Just follow this example:\n\n```tsx\nimport { ScreenShotController, ScreenShot } from 'react-component-screenshot';\n\nexport function Example() {\n  // Create a controller\n  const controller = new ScreenShotController();\n\n  const takeCapture = () =\u003e {\n    // Capture and get the screenshot as base64 string\n    controller.capture().then((base64) =\u003e {\n      console.log(base64);\n    });\n  };\n\n  ...\n}\n```\n\n🖼️ Capture Components Not in the DOM\n\nNeed to capture a component that's not in the DOM? No problem! 🎉 (Obviusly You don't even need to use the ScreenShot component for this.)\n\n```tsx\nimport { ScreenShotController, ScreenShot } from 'react-component-screenshot';\n\nexport function Example() {\n  // Create a controller\n  const controller = new ScreenShotController();\n\n  const takeCapture = () =\u003e {\n    // Capture and save the screenshot\n    controller.captureAndSaveFromComponent({\n      component: (\n        \u003cdiv\u003e\n          \u003ch1\u003eMy awesome component\u003c/h1\u003e\n          \u003cp\u003eSome content\u003c/p\u003e\n        \u003c/div\u003e\n      ),\n      name: \"my-awesome-component\",\n      extension: \"png\",\n      type: \"image/png\",\n      quality: 1,\n    });\n  };\n\n  ...\n}\n```\n\n## 🤝 Contributions\n\nContributions are welcome. If you find an issue or have an idea to improve react-component-screenshot, feel free to open an issue or submit a pull request. 🚀\n\n## 📜 License\n\nLicensed as MIT open source. 📜\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabians%2Freact-component-screenshot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabians%2Freact-component-screenshot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabians%2Freact-component-screenshot/lists"}