https://github.com/bkjang/use-lazyload
📚This is custom hooks for lazy loading in react.
https://github.com/bkjang/use-lazyload
hooks intersection-observer react
Last synced: 12 months ago
JSON representation
📚This is custom hooks for lazy loading in react.
- Host: GitHub
- URL: https://github.com/bkjang/use-lazyload
- Owner: BKJang
- Created: 2020-01-26T05:12:35.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-23T01:55:33.000Z (almost 2 years ago)
- Last Synced: 2025-03-11T18:58:11.681Z (about 1 year ago)
- Topics: hooks, intersection-observer, react
- Language: JavaScript
- Homepage: https://bkjang.github.io/use-lazyload
- Size: 1.98 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# use-lazyload
>
[](https://www.npmjs.com/package/use-lazyload)
## Install
```bash
npm install --save use-lazyload
```
## Usage
```tsx
import * as React from 'react';
import { useLazyload } from 'use-lazyload';
const options: IObserverOptions = {
root: null,
rootMargin: "0px",
thresholds: [0.0],
};
const onIntersectCallback = async () => {
//...fetch items
}
const Example = () => {
const [element, setElement] = useLazyload(onIntersectCallback, options);
return (
{items.map(
//...
)}
{
{isLoading}
}
)
}
```
## [Example](https://github.com/BKJang/use-lazyload/tree/master/example)
```bash
cd example
npm install
npm run start
```
## License
MIT © [BKJang](https://github.com/BKJang)
---
This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).