React imagesLoaded

React bindings for imagesLoaded event system

Props

| 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 (
      <ImagesLoaded
        elementType={'ul'} // defaults to 'div'
        className={'your-container-class'} // defaults to 'images-loaded-container'
        onAlways={this.handleOnAlways}
        onProgress={this.handleOnProgress}
        onFail={this.handleOnFail}
        done={this.handleDone}
        background=".image" // true or child selector
      >
        {/* Your images */}
      </ImagesLoaded>
    );
  }
}

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

Testing

This project is using jest as testing framework.

Storybook

This project is using storybook as UI testing framework.

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

Contribute

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