# react-capture-element

> react-capture-element allows you to capture all React Element, including images, pdf.

Latest version **0.1.24** (published 2022-12-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-capture-element
pnpm add react-capture-element
yarn add react-capture-element
bun add react-capture-element
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.24 |
| Published | 2022-12-11 |
| First published | 2022-10-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 494.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Jinsun Park |
| Maintainers | jinsunee |
| Keywords | react, capture, screen-capture |

## Links

- npm: https://www.npmjs.com/package/react-capture-element
- Repository: https://github.com/jinsunee/react-capture-element
- Homepage: https://github.com/jinsunee/react-capture-element#readme
- Issues: https://github.com/jinsunee/react-capture-element/issues
- npm.io page: https://npm.io/package/react-capture-element

## Dependencies (1)

- [html2canvas](https://npm.io/package/html2canvas.md) ^1.4.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.24 (latest) — 2022-12-11
- 0.1.23 — 2022-10-27
- 0.1.22 — 2022-10-27
- 0.1.21 — 2022-10-27
- 0.1.20 — 2022-10-27
- 0.1.19 — 2022-10-27
- 0.1.18 — 2022-10-26
- 0.1.17 — 2022-10-26
- 0.1.16 — 2022-10-26
- 0.1.15 — 2022-10-26
- 0.1.14 — 2022-10-26
- 0.1.13 — 2022-10-26
- 0.1.12 — 2022-10-26
- 0.1.11 — 2022-10-25
- 0.1.10 — 2022-10-25
- … 8 more at https://npm.io/package/react-capture-element/versions

## README

# react-capture-element

react-capture-element allows you to capture all React Element, including images, pdf.

![NPM version](https://img.shields.io/npm/v/react-capture-element)
![License](http://img.shields.io/npm/l/react-capture-element.svg?style=flat-square)

## Preview

<p align="center">
  <img src="https://user-images.githubusercontent.com/31176502/198377589-aaa2ad58-9106-4968-9166-8924af0dd92b.gif" />
</p>

## Installation

```
$ yarn add react-capture-element
```

## How to run example code

```
$ git clone https://github.com/jinsunee/react-capture-element.git
$ cd react-capture-element
$ yarn
$ yarn storybook
```

## Full code of example

```
import React, { useState } from "react";
import { CaptureElement } from "../src";

export default function Example() {
  const [dataUrl, setDataUrl] = useState<string>();

  return (
    <div
      style={{
        width: "100%",
        height: "100vh",
        display: "flex",
        justifyContent: "center",
      }}
    >
      <div
        style={{
          position: "relative",
          overflow: "hidden",
          width: 400,
          height: 400,
        }}
      >
        <CaptureElement onCapture={({ dataUrl, blob }) => setDataUrl(dataUrl)}>
          {({
            captureMode,
            captureStatus,
            onStartCapture,
            onStopCapture,
            onResetCapture,
            cropPositionLeft,
            cropPositionTop,
            cropWidth,
            cropHeight,
          }) => (
            <>
              <button onClick={onStartCapture}>start Capture</button>
              <div
                style={{
                  backgroundColor: 'purple',
                  height: 300,
                  width: 300,
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  fontWeight: "bold",
                  fontSize: 20,
                }}
              >
                Capture me!
              </div>
              {captureStatus === "DONE" && captureMode === "ON" && (
                <div
                  style={{
                    position: "absolute",
                    left: cropPositionLeft + cropWidth - 20,
                    top: cropPositionTop + cropHeight,
                    zIndex: 999,
                  }}
                >
                  <button onClick={onResetCapture}>Reset Capture</button>
                  <button onClick={onStopCapture}>Stop Capture</button>
                </div>
              )}
            </>
          )}
        </CaptureElement>
      </div>
      <div style={{ flex: 1 }}>
        {dataUrl != null && (
          <img alt="data-url-image" src={dataUrl} style={{ width: 300 }} />
        )}
      </div>
    </div>
  );
}

```

---
_Source: https://npm.io/package/react-capture-element · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._