element-shot-components

element-shot

A lightweight component library for capturing HTML elements as screenshots. Supports React and Vue.js.

日本語版 README はこちら

Shows a camera button on the bottom-right of target elements.

Features

• 📸 Capture any HTML element as a screenshot
• 🎯 Simple and intuitive API
• 🚀 Lightweight with minimal dependencies
• ⚛️ React component support
• 💚 Vue.js component support
• 🎨 Customizable UI and behavior
• 📱 Responsive and mobile-friendly
• 🔧 TypeScript support

Installation

npm install element-shot-components
# or
yarn add element-shot-components
# or
pnpm add element-shot-components

Usage

React

import { ElementShot } from "element-shot-components/react";

function App() {
  return (
    <ElementShot
      action="download"
      title="Screenshot Title"
      caption="This will be included in the screenshot"
      align="center"
    >
      <div>
        <h1>Content to capture</h1>
        <p>This content will be captured when clicking the camera button</p>
      </div>
    </ElementShot>
  );
}

Vue.js

<template>
  <ElementShot
    action="download"
    title="Screenshot Title"
    caption="This will be included in the screenshot"
    align="center"
  >
    <div>
      <h1>Content to capture</h1>
      <p>This content will be captured when clicking the camera button</p>
    </div>
  </ElementShot>
</template>

<script setup>
  import { ElementShot } from "element-shot-components/vue";
</script>

Props

Prop	Type	Default	Description
action	'download' | 'copy' | 'share' | 'preview'	'download'	Action to perform with the screenshot
target	string	-	CSS selector for preview target (required for 'preview' action)
title	string	-	Title displayed above the content (included in screenshot)
caption	string	-	Caption displayed below the content (included in screenshot)
align	'left' | 'center'	'left'	Alignment of title and caption
basename	string	'element-shot-components'	Base filename for downloaded images
defaultStyle	boolean	true	Apply default styling to title and caption
cameraPosition	'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	'top-right'	Position of the camera button
cameraView	'always' | 'hover' | 'none'	'hover'	When to show the camera button
scale	number	1	Scale factor for the screenshot
className	string	-	Additional CSS class for the container
style	object	-	Additional inline styles for the container

React-specific Props

Prop	Type	Description
onBeforeCapture	() => void	Callback before capture starts
onAfterCapture	(blob: Blob) => void	Callback after capture completes
onError	(error: Error) => void	Callback when an error occurs

Vue.js-specific Events

Event	Payload	Description
beforeCapture	-	Emitted before capture starts
afterCapture	Blob	Emitted after capture completes
error	Error	Emitted when an error occurs

Actions

• download: Downloads the screenshot as a PNG file
• copy: Copies the screenshot to clipboard (requires HTTPS)
• share: Opens the native share dialog (requires HTTPS and browser support)
• preview: Displays the screenshot in a specified <img> element

Examples

Download with Custom Filename

<ElementShot action="download" basename="my-screenshot">
  <div>Content</div>
</ElementShot>

Copy to Clipboard

<ElementShot action="copy" cameraView="always">
  <div>Content</div>
</ElementShot>

Preview in Image Element

<>
  <ElementShot action="preview" target="#preview-image">
    <div>Content</div>
  </ElementShot>

  <img id="preview-image" alt="Screenshot preview" />
</>

Custom Styling

<ElementShot
  className="my-custom-class"
  style={{ maxWidth: "600px" }}
  defaultStyle={false}
>
  <div>Content</div>
</ElementShot>

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers with HTML5 Canvas support

Development

# Install dependencies
npm install

# Run development build
npm run dev

# Run tests
npm test

# Run React example
npm run example:react

# Run Vue example
npm run example:vue

# Build library
npm run build

License

MIT License - see LICENSE file for details

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

• Fork the repository
• Create your feature branch (git checkout -b feature/amazing-feature)
• Commit your changes (git commit -m 'Add some amazing feature')
• Push to the branch (git push origin feature/amazing-feature)
• Open a Pull Request

Acknowledgments

• Built with html2canvas
• Bundled with tsup
• Tested with Vitest