- ✨ Simple: is simple to use and has no external dependencies at all
- 🌱 Lightweight: just 983b gzipped
- 💎 TypeScript: full-written in TypeScript
- ⚛️ State Management: control conversion states
- ⌛️ Async Logic: event handlers for asynchronous logic
- 🏆 MIT Licensed: free for personal and commercial use
- 🚀 React Hooks
In order to use @hugocxl/react-to-image, all you need to do is install the
npm package:
npm i @hugocxl/react-to-image
pnpm add @hugocxl/react-to-imagehtml-to-image is an invaluable utility library that enables the generation of
images from a DOM node utilising the power of HTML5 canvas and SVG. It provides
a seamless way to convert HTML elements into visual representations.
react-to-image further enhances the integration of this library with React leveraging the capabilities of html-to-image and offering a simplified and intuitive approach for generating images from React components.
To start using @hugocxl/react-to-image, you just need to import any of the
hooks from the package.
import { useToSvg } from '@hugocxl/react-to-image'
function App() {
const [state, convertToSvg, ref] = useToSvg<HTMLDivElement>({
onSuccess: data => {
console.log(data)
}
})
return (
<div ref={ref}>
<h1>My component</h1>
<button onClick={convertToSvg}>Convert to PNG</button>
</div>
)
}const [state: State, fn: Fn, ref: Ref] = hook<HtmlElement>(options: Options)The current hooks are being exported:
useToSvguseToPnguseToJpeguseToCanvasuseToBlob
| name | type | description |
|---|---|---|
| data | ReturnType<fn> |
The last successfully resolved data for the conversion |
| error | string |
If the conversion attempt resulted in an error. The corresponding error property has the error received from the attempted conversion |
| status | string |
state of the conversion. Posible values: IDLE, LOADING, SUCCESS, ERROR |
| isIdle | boolean |
if the conversion is idle. It's only true if no conversion has been initialized yet |
| isLoading | boolean |
If the conversion is currently being done |
| isError | boolean |
If the conversion has failed |
| isSuccess | boolean |
If the conversion has succesfully finished |
The function to be called to convert the image.
The ref to be passed down to the HTML element that you want to capture as an image.
Apart from the following, you have all the options available to
html-to-image
| name | type | description |
|---|---|---|
| selector | string |
A valid querySelector() argument. If passed, the ref will be ommited |
| onStart | boolean |
Callback called if the conversion is starting |
| onSuccess | boolean |
Callback called if the conversion has finished succesfully |
| onError | boolean |
Callback called if the conversion has thrown an error |
Use the selector option to specify the element that you want to capture instead of the ref. Useful if you need to convert elements that are far in the application structure.
import { useToPng } from '@hugocxl/react-to-image'
export default function App() {
const [state, convert] = useToPng<HTMLDivElement>({
selector: '#my-element',
onSuccess: data => console.log('Converted #my-element to PNG!', data),
})
return (
<div>
<button onClick={convert}>Copy to clipboard</button>
</div>
)
}import { useToBlob } from '@hugocxl/react-to-image'
export default function App() {
const [_, convert, ref] = useToBlob<HTMLDivElement>({
onStart: data => console.log('Starting...'),
onSuccess: data => console.log('Success', data),
onError: error => console.log('Error', error),
})
return (
<div ref={ref}>
<h1>My component</h1>
<button onClick={convert}>Download</button>
</div>
)
}import { useToPng } from '@hugocxl/react-to-image'
export default function App() {
const [_, convert, ref] = useToPng<HTMLDivElement>({
quality: 0.8,
onSuccess: data => {
const link = document.createElement('a');
link.download = 'my-image-name.jpeg';
link.href = dataUrl;
link.click();
}
})
return (
<div ref={ref}>
<h1>My component</h1>
<button onClick={convert}>Download</button>
</div>
)
}Convert a component to a PNG and copy the image to the clipboard
import { useToPng } from '@hugocxl/react-to-image'
export default function App() {
const [{ isSuccess }, convert, ref] = useToPng<HTMLDivElement>({
onSuccess: data => navigator.clipboard.writeText(data)
})
return (
<div ref={ref}>
<h1>My component</h1>
<button onClick={convert}>Copy to clipboard</button>
{isSuccess && <span>Image copied to the clipboard!</span>}
</div>
)
}import { useToSvg } from '@hugocxl/react-to-image'
export default function App() {
const [{ isError, error }, convert, ref] = useToSvg<HTMLDivElement>()
return (
<div ref={ref}>
<button onClick={convert}>Convert</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
{isError && <span>{`Sorry, there was an error converting the image: ${error}`}</span>}
</div>
)
}import { useToPng } from '@hugocxl/react-to-image'
export default function App() {
const [{ isLoading }, convert, ref] = useToPng<HTMLDivElement>({
onSuccess: data => {
const img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
}
})
return (
<div ref={ref}>
<h1>My component</h1>
<button onClick={convert}>Inject image</button>
{isLoading && <span>Loading...</span>}
</div>
)
}import { useToCanvas } from '@hugocxl/react-to-image'
export default function App() {
const [{ isLoading }, convert, ref] = useToCanvas<HTMLDivElement>({
onSuccess: canvas => document.body.appendChild(canvas);
})
return (
<div ref={ref}>
<h1>My component</h1>
<button onClick={convert}>Inject canvas</button>
</div>
)
}No one’s perfect. If you’ve found any errors, want to suggest enhancements, or expand on a topic, please feel free to open an Issue or collaborate by PR.
Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
@hugocxl/react-to-image is open source software licensed as MIT © Hugo Corta.
Made with ♥ by @hugocxl