onimagesdidload-ts

Notify your component when all images inside it are loaded

Usage no npm install needed!

<script type="module">
  import onimagesdidloadTs from 'https://cdn.skypack.dev/onimagesdidload-ts';
</script>

README


onimagesdidload tsx version

Notify your component when all images inside it are loaded 🏹

View Demo · Report Bug · Request Feature

Table of Contents

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

open codeSandbox »

Contact

Taha seddik - taha.seddik1992@gmail.com

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