react-img-preloader

making images preloading dead-simple, additionally, offering both the total count of images aimed for preloading and the count of those have been preloaded, to ease the work if anyone fancy to show a running progress bar.

Usage no npm install needed!

<script type="module">
  import reactImgPreloader from 'https://cdn.skypack.dev/react-img-preloader';
</script>

README

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>