React imagesLoaded

React bindings for imagesLoaded event system

Props

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

Example usage

1// ES6
2import ImagesLoaded from 'react-images-loaded';
3
4// ES5
5const ImagesLoaded = require('react-images-loaded');

1
2class App extends Component {
3  handleOnAlways = (instance) => {}
4
5  handleOnProgress = (instance, image) => {}
6
7  handleOnFail = (instance) => {}
8
9  handleDone = (instance) => {}
10
11  render() {
12    return (
13      <ImagesLoaded
14        elementType={"ul"} // defaults to 'div'
15        className={"your-container-class"} // defaults to 'images-loaded-container'
16        onAlways={this.handleOnAlways}
17        onProgress={this.handleOnProgress}
18        onFail={this.handleOnFail}
19        done={this.handleDone}
20        background='.image' // true or child selector
21      >
22        {/* Your images */}
23      </ImagesLoaded>
24    );
25  }
26}

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.

Testing

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.

Contribute

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