React hook to export components as images (React 18 compatible)
npm install react-export-as-image!npm
!downloads
!license
!react
!build
!Language
!GitHub stars
Generate an image from a React component using HTML5 canvas and SVG.
A simple React hook built on top of html-to-image to export components as
PNG / JPEG / SVG (React 16.8+ & React 18 compatible).
---
- Supported Export format PNG / JPEG / SVG
- Works with React@18 (no deprecated APIs)
- Not using depriciated domNode
---
``bash`
npm install react-export-as-image
`jsx
import { useExportAsImage } from "react-export-as-image";
function App() {
const {ref,exportAsImage} = useExportAsImage();
return (
export default App;
`Export with High Quality (Social Media)
jsx`
const { ref, exportAsImage } = useExportAsImage({
pixelRatio: 3
});
jsx
const { ref, exportAsImage } = useExportAsImage({
format: "jpeg",
backgroundColor: "#ffffff"
});`
Export in SVG
jsx
const { ref, exportAsImage } = useExportAsImage({
format: "svg"
});
`All Options
jsx
const { ref, exportAsImage } = useExportAsImage({
fileName = "component.png",
format = "png",
quality = 0.95,
pixelRatio = 2,
backgroundColor
});
`License
This project is licensed under the