https://github.com/magicink/use-lazy-loading

A simple React hook for lazy-loading
https://github.com/magicink/use-lazy-loading

hooks lazy-loading react

Last synced: 9 days ago
JSON representation

A simple React hook for lazy-loading

• Host: GitHub
• URL: https://github.com/magicink/use-lazy-loading
• Owner: magicink
• License: mit
• Created: 2019-08-30T16:55:53.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-08T23:38:27.000Z (almost 2 years ago)
• Last Synced: 2023-02-26T08:41:58.123Z (almost 2 years ago)
• Topics: hooks, lazy-loading, react
• Language: JavaScript
• Size: 458 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Overview

A simple, unopinionated React hook for lazy-loading.

**NOTE:** This library uses Interaction Observer API so you will need to use

a polyfill to support older browsers.

### Usage

```js

import { useLazyLoading } from 'use-lazy-loading'

const { lazyLoad } = useLazyLoading(target => {

  target.setAttribute('src', target.getAttribute('data-src'))

  target.classList.add('loaded')

})

React.useEffect(() => {

  lazyLoad()

}, [])

```

## Initialization

`useLazyLoading(entryCallback, target, config)`

### Arguments

| name            | type       | required | default            | description                                                                                                                                          |

| --------------- | ---------- | -------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |

| `entryCallback` | `Function` | yes      |                    | A function that is invoked once the target becomes visible. The function should accept the parameter `target` that is the element being operated on. |

| `target`        | `String`   | no       | `[data-src]`       | The query selector used to find the element that needs to be loaded.                                                                                 |

| `config`        | `Object`   | no       | `{threshold: 1.0}` | The configurations used to instantiate the intersection observer object.                                                                             |

## API

### Methods

#### `lazyLoad()`

Creates the Intersection Observer and binds the scroll handler.