Skip to content

frzkn/use-images-loaded

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

🖼️ useImagesLoaded

Custom react hook which returns true once all the images inside a container are loaded.

Check out a working demo here

🚀 Getting Started

Installation

yarn add use-images-loaded

Usage

Displaying a loading indicator while images are loading in a container

import useImageLoaded from 'use-images-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>
  )
}

About

🖼️ Returns true once all the images inside a container are loaded

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published