littlee / react-img-preloader

A Image preloader for React, aims for making image preloading dead-simple and easing the task of showing a running progress bar

React-Img-Preloader

A Image preloader for React, aims for making image preloading dead-simple and easing the task of showing a running progress bar

Install 💡

npm install react-img-preloader --save

How To Use 🥊

import ImgPreloader from 'react-img-preloader'

// gather up all images you want for preload in an array
var images = [
  require('/your/path/to/img1'),
  require('/your/path/to/img2'),
  require('/your/path/to/img3'),
  // ... more goes here
]

<ImgPreloader imgs={images} onComplete={() => {
  console.log('All images are loaded')
}}>
  {
    ({loaded, total}) => <div>imgages planned for preload: {total}; images have been preloaded: {loaded}</div>
	}
</ImgPreloader>