ts-on-images-did-load

Notify your component when all images inside it are loaded

Usage no npm install needed!

<script type="module">
  import tsOnImagesDidLoad from 'https://cdn.skypack.dev/ts-on-images-did-load';
</script>

README


useImagesDidLoad

hook to call some logic when images inside component are ready 🏹

View Demo · Report Bug · Request Feature

Table of Contents

Why this Component

this hook could be useful if you wanna show a spinner until images are ready or do some logic when every thing is ready

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 ts-on-images-did-load

2.Then import it in your tsx component:

import { OnImagesDidLoad } from 'ts-on-images-did-load'

Usage

const imagesContainerRef = useRef()
useImagesDidLoad(
  imagesContainerRef,
  () => {
    // call some callback
  },
  [
    /*Dependencies*/
  ]
  return (
    <div ref={imagesContainerRef}>
      //  ... images
    </div>
  )
)
  • codeSandbox demo -->

Spinner while images gets loaded Demo

open codeSandbox »

Contact

Taha seddik - taha.seddik1992@gmail.com

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