useImagesLoaded
Returns true once all the images inside a container are loaded
github.com/frzkn/use-images-loaded
Installation
Install with npm
npm install use-images-loaded
Install with yarn
yard add use-images-loaded
Usage
Displaying a loading indicator while images are loading in a container
import useImageLoaded from 'use-image-loaded'
const ImageContainer = () => {
const [ref, loaded] = useImagesLoaded()
return (
<div ref={ref}>
<p> Status: {loaded ? 'Loaded': 'Loading'} </p>
<img src="https://unsplash.it/200/200" alt="image"/>
<img src="https://unsplash.it/200/200" alt="image"/>
<img src="https://unsplash.it/200/200" alt="image"/>
</div>
)
}
See it in action
Status: Loading