Simple React hook to take screenshots of a DOM element.
npm install use-screenshot
or
yarn add use-screenshot
import { useScreenshot } from "use-screenshot"
function anyReactComponent() {
const { image, takeScreenShot } = useScreenshot()
const ref = useRef(null)
takeScreenShot(ref.current)
return <div ref={ref}>...</div>
}
const { image, takeScreenShot } = useScreenshot()
The image is a base64 string of the screenshot.
takeScreenShot(element)
The element to take the screenshot of.
const { image, takeScreenShot } = useScreenshot({
type: "image/jpeg",
quality: 0.92
})
The type of the image. Default is image/png
.
The quality of the image. Default is 0.8
.
Check /example
for a working example.
Please feel free to contribute to this project. If you find any bugs or have any suggestions, please open an issue.
MIT