Table of Contents

• Why this Component
• Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
  • Props
• Spinner while images gets loaded Demo
• Contact

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,

Spinner while images gets loaded Demo

Contact

Taha seddik - [email protected]

Project Link: https://github.com/NoobDay/onimagesdidload-ts