Page MenuHomec4science
Files F100872910

useImage.js
No OneTemporary
Actions

File Metadata

Created
Mon, Feb 3, 12:06

useImage.js
View Options

import { useState, useEffect } from 'react';
/**
* Fetch and load an image for programatic use such as in a `<canvas>` element.
*
* @param imageOrUrl The `HtmlImageElement` or image url to load
* @param crossOrigin The `crossorigin` attribute to set
*
* ```ts
* const { image, error } = useImage('/static/kittens.png')
* const ref = useRef<HTMLCanvasElement>()
*
* useEffect(() => {
* const ctx = ref.current.getContext('2d')
*
* if (image) {
* ctx.drawImage(image, 0, 0)
* }
* }, [ref, image])
*
* return (
* <>
* {error && "there was a problem loading the image"}
* <canvas ref={ref} />
* </>
* ```
*/
export default function useImage(imageOrUrl, crossOrigin) {
var _useState = useState({
image: null,
error: null
}),
state = _useState[0],
setState = _useState[1];
useEffect(function () {
if (!imageOrUrl) return undefined;
var image;
if (typeof imageOrUrl === 'string') {
image = new Image();
if (crossOrigin) image.crossOrigin = crossOrigin;
image.src = imageOrUrl;
} else {
image = imageOrUrl;
if (image.complete && image.naturalHeight > 0) {
setState({
image: image,
error: null
});
return;
}
}
function onLoad() {
setState({
image: image,
error: null
});
}
function onError(error) {
setState({
image: image,
error: error
});
}
image.addEventListener('load', onLoad);
image.addEventListener('error', onError);
return function () {
image.removeEventListener('load', onLoad);
image.removeEventListener('error', onError);
};
}, [imageOrUrl, crossOrigin]);
return state;
}

Event Timeline

c4science · Help