react-capture-element
v0.1.24
Published
react-capture-element allows you to capture all React Element, including images, pdf.
Downloads
10
Readme
react-capture-element
react-capture-element allows you to capture all React Element, including images, pdf.
Preview
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>
);
}