useImageLoad Hook

useImageLoad is a custom React hook designed to enhance the user experience by efficiently loading images. It supports lazy loading to improve performance and provides detailed status updates during the image loading process.

Features

- Progressive Image Loading: Displays a thumbnail first, followed by the full-resolution image once loaded.
- Lazy Loading Support: Defers the loading of off-screen images until they are needed.
- Detailed Loading States: Tracks the loading state, completion, and any errors that occur.
- SSR Safe: Checks for window object availability to ensure compatibility with server-side rendered applications.
- Cleanup Mechanism: Properly disconnects IntersectionObserver to prevent memory leaks.

Installation

$3

``bash
npm install @custom-react-hooks/use-image-load
`

or

`bash
yarn add @custom-react-hooks/use-image-load
`

$3

`sh
npm install @custom-react-hooks/all
`

or

`sh
yarn add @custom-react-hooks/all
`

Importing the Hook

The useImageLoad hook must be imported using a named import as shown below:

Named Import:
`javascript
import { useImageLoad } from '@custom-react-hooks/use-image-load';
`
This approach ensures that the hook integrates seamlessly into your project, maintaining consistency and predictability in how you use our package.

Usage

`typescript
import { useImageLoad } from '@custom-react-hooks/all';

const ImageLoadComponent = ({ thumbnailSrc, fullSrc }) => {
const thumbnailOnlyRef = useRef(null);
const lazyLoadRef = useRef(null);

const thumbnailOnlyState = useImageLoad({ thumbnailSrc, fullSrc: '' }, thumbnailOnlyRef);
const lazyLoadState = useImageLoad({ thumbnailSrc, fullSrc, lazyLoad: true }, lazyLoadRef);

return (


export default ImageLoadComponent;
`

API Reference

$3

We welcome contributions to useImageLoad`. For bugs, feature requests, or pull requests, please reach out through the project's repository.