Onimagesdidload-ts NPM

Why this Component

Unfortunately React lifecycle methods aren't enough for doing your logic after images are loaded . For example If you wanna get always the right height of images container or make an images loading spinner ... 🤔 that component will be useful for you 🎉

Built With

React
TypeScript (TypeScript JSX)

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

React.js/TypeScript project Help ?

Installation

1.Install it using NPM

npm i onimagesdidload-ts

2.Then import it in your tsx component:

import OnImagesDidLoad from "onimagesdidload-ts";

Usage

 <OnImagesDidLoad
    onLoaded={callback} /* start your logic when images are loaded */
    doesImagesUpdated={boolean} /* boolean to inform onImagesDidLoad component that there is new images */
    classNameWhileLoading={" ... "}/* CSS Classes while loading */
    classNameOnloaded={" ... "}/* CSS Classes when images are loaded */ >
    
    /* your logic to display images , cards ... */
    <div className="myCoolImages">
       
    </div>
    
  </OnImagesDidLoad>

Props

onLoaded [Required] : callback function to start your logic when images are loaded,
doesImagesUpdated [Required] : boolean to inform OnImagesDidLoad component that there is new images ( so OnImagesDidLoad will restart his process)
classNameWhileLoading [optional] : prefix css classes added to the container element while images are loading default .spinning,
classNameOnloaded [optional] :prefix css classes added to the container element when images are loading default .imagesLoaded,