react-images-loaded

    2.0.0 • Public • Published

    React imagesLoaded

    React bindings for imagesLoaded event system

    Build Status codecov

    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 :)

    Install

    npm i react-images-loaded

    DownloadsWeekly Downloads

    619

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    9.23 kB

    Total Files

    6

    Last publish

    Collaborators

    • brahma-dev
    • oyvindhermansen