A react hook for pre-loading images.
npm i react-use-image
# or
yarn add react-use-image
import useImage from 'react-use-image';
const Example = ({ src }) => {
// use the hook
// pass it an image source url
const { loaded } = useImage(src);
if (!loaded) return null;
return <img src={src} alt="Example" />;
};
Image URL, e.g. https://foo.com/cat.jpg
{
"loaded": false, // image found and loaded
"failed": false, // image not found
// actual size of the image
"dimensions": {
"width": 0, // width of image in pixels
"height": 0 // height of image in pixels
}
}
- Storybook coming soon
Joe Seifi
MIT