https://github.com/abians/react-component-screenshot
Effortlessly capture and save high-quality screenshots of your React components with this lightweight tool.
https://github.com/abians/react-component-screenshot
component html2canvas react react-component-screenshot react-screenshot react-screenshot-component screenshot screenshot-react-component
Last synced: 5 months ago
JSON representation
Effortlessly capture and save high-quality screenshots of your React components with this lightweight tool.
- Host: GitHub
- URL: https://github.com/abians/react-component-screenshot
- Owner: AbianS
- License: mit
- Created: 2024-06-15T13:42:35.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-15T13:42:38.000Z (about 2 years ago)
- Last Synced: 2025-08-09T14:21:18.199Z (11 months ago)
- Topics: component, html2canvas, react, react-component-screenshot, react-screenshot, react-screenshot-component, screenshot, screenshot-react-component
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-component-screenshot
- Size: 101 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React Component Screenshot
React component to take screenshot of the component.
---
## ✨ Features
- 📸 **Take Screenshot**: Take screenshot of the component.
- 📦 **Lightweight**: Only 1KB gzipped.
- 🌐 **Cross Browser**: Works in all modern browsers.
- 🛠 **Easy to Use**: Just wrap your component with `Screenshot` component.
- 📜 **Typescript**: Written in typescript.
## 🔧 Installation
```sh
npm install react-component-screenshot
```
Peer dependencies: `react`, `html2canvas`.
```sh
npm install react html2canvas --save
```
## 🚀 Usage
### 📋 Basic Usage
Wrap your component with `ScreenShot` component and pass the `controller` prop.
```tsx
import { ScreenShotController, ScreenShot } from 'react-component-screenshot';
export function Example() {
// Create a controller
const controller = new ScreenShotController();
const takeCapture = () => {
// Capture and save the screenshot
controller.captureAndSave({
name: 'my-awesome-component',
extension: 'jpg',
type: 'image/jpeg',
quality: 1
});
};
// Wrap your component with ScreenShot component and pass the controller
return (
My awesome Component
Some content
take Capture
);
}
```
### 🔍 Getting the Image as Base64
If you prefer to obtain the image as a base64 string, it's also very easy. 🚀 Just follow this example:
```tsx
import { ScreenShotController, ScreenShot } from 'react-component-screenshot';
export function Example() {
// Create a controller
const controller = new ScreenShotController();
const takeCapture = () => {
// Capture and get the screenshot as base64 string
controller.capture().then((base64) => {
console.log(base64);
});
};
...
}
```
🖼️ Capture Components Not in the DOM
Need 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.)
```tsx
import { ScreenShotController, ScreenShot } from 'react-component-screenshot';
export function Example() {
// Create a controller
const controller = new ScreenShotController();
const takeCapture = () => {
// Capture and save the screenshot
controller.captureAndSaveFromComponent({
component: (
My awesome component
Some content
),
name: "my-awesome-component",
extension: "png",
type: "image/png",
quality: 1,
});
};
...
}
```
## 🤝 Contributions
Contributions 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. 🚀
## 📜 License
Licensed as MIT open source. 📜