React bindings for imagesLoaded event system

Usage no npm install needed!

<script type="module">
  import bufferappReactImagesLoaded from 'https://cdn.skypack.dev/@bufferapp/react-images-loaded';


React imagesLoaded

React bindings for imagesLoaded event system

Build Status


Name Type
onAlways Function
onProgress Function
onFail Function
done Function
background String / Boolean

Example usage

// ES6
import ImagesLoaded from 'react-images-loaded';

// ES5
const ImagesLoaded = require('react-images-loaded');

class App extends Component {
  handleOnAlways = (instance) => {}

  handleOnProgress = (instance, image) => {}

  handleOnFail = (instance) => {}

  handleDone = (instance) => {}

  render() {
    return (
        elementType={"ul"} // defaults to 'div'
        className={"your-container-class"} // defaults to 'images-loaded-container'
        background='.image' // true or child selector
        {/* Your images */}

Install for local development

Defaulting to yarn, but npm works just as well.

$ git clone https://github.com/oyvindhermansen/react-images-loaded.git
$ cd react-images-loaded
$ yarn install

Local development

This project is using webpack for development. Just run yarn demo and it will fire up a dev server with hot module reloading between /demo/demo.js and /src/index.js. This way it gets super simple to test the code you are writing.


This project is using jest as testing framework.

yarn test for running the tests one time. yarn test:watch for running tests in watch mode

Code formatting

This package is using prettier as code formatter. Just write your code, and prettier will take care of the formatting when you commit your changes.


Feel free to make pull requests or issues if something doesn't work or could be better :)