ts-on-images-did-load v1.0.0

Table of Contents

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

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

Contact

Taha seddik - taha.seddik1992@gmail.com

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