Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

use-lazy-loading

1.0.1 • Public • Published

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

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.

Install

npm i use-lazy-loading

DownloadsWeekly Downloads

0

Version

1.0.1

License

ISC

Unpacked Size

7.39 kB

Total Files

4

Last publish

Collaborators

  • avatar