react-suspense-image-loader

This component loads your images asynchronously using react suspense. For animations react-transition-group is used and can be customized easily.

Install

npm i react-suspense-image-loader

Usage

import React from "react"
import ReactDOM from "react-dom"
import Spinner from "./Spinner"
import SuspenseImageLoader from "react-suspense-image-loader"

function App() {
  return (
    <div>
      <SuspenseImageLoader
        src="https://picsum.photos/4101"
        height={400}
        width={400}
        ms={800}
        fallback={<Spinner />} // any spinner you like
      />
    </div>
  )
}

ReactDOM.render(<App history={history} />, document.getElementById("root"))

Examples

You'll most likely define a spinner or a low resolution placeholder image while waiting for actual image to load. So I've prepared two examples for you to play with.

Both are included in the demo:

git clone https://github.com/bilgeonceken/ReactSuspenseImageLoader
cd ReactSuspenseImageLoader
npm install
npm start

Properties

| Property | Type | Required | Description | | :--------- | :-------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | src | string | yes | Image URL | | ms | number | yes | Fallback delay (ms). Duration to wait for resource to load before rendering fallback component. For example if this is 500, that means i'll give it .5s for actual image to load and then render spinner in order to prevent flickering. | | width | number | yes | Image width | | height | number | yes | Image height | | fallback | component | yes | Component to render while waiting for image image to load |