https://github.com/saitolume/use-lazyload-ref
🖼️ Custom hook to use lazyload easily
https://github.com/saitolume/use-lazyload-ref
custom-hook lazyload react
Last synced: 3 months ago
JSON representation
🖼️ Custom hook to use lazyload easily
- Host: GitHub
- URL: https://github.com/saitolume/use-lazyload-ref
- Owner: saitolume
- License: mit
- Created: 2019-12-30T11:49:41.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-10-13T16:44:16.000Z (over 4 years ago)
- Last Synced: 2025-03-30T20:33:38.417Z (3 months ago)
- Topics: custom-hook, lazyload, react
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/use-lazyload-ref
- Size: 109 KB
- Stars: 58
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-lazyload-ref
[](https://github.com/saitoeku3/use-lazyload-ref/blob/master/LICENSE) [](https://badge.fury.io/js/use-lazyload-ref) 
> Custom hook to use lazyload easily
## Installation
```
$ npm install use-lazyload-ref
$ yarn add use-lazyload-ref
```## Usage
To enable lazy loading, simply specify `ref` and `data-src` attributes.
```jsx
import React from 'react'
import useLazyloadRef from 'use-lazyload-ref'const Component = ({ url }) => {
const [ref, hasLoaded] = useLazyloadRef()return (
{hasLoaded || }
![]()
{/* */}
{/* */}
{/* */}
{/* */}
)
}
```## API
### `useLazyloadRef: () => [(node: HTMLElement | null) => void, boolean]`
Custom hook.
In addition to `src` in `audio`, `iframe`, `img` and `video`, CSS property `background-image` can be lazy loaded.```jsx
const [ref, hasLoaded] = useLazyloadRef()
````useLazyloadRef` returns a callback ref function and a load state.
- `ref`: Initialize observer for lazyload.
- `hasLoaded`: Default is false. Turn true if the source has finished loading.## License
MIT