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.
import React from 'react'import useLazyloadRef from 'use-lazyload-ref' const Component = url const ref hasLoaded = return <div> hasLoaded || <Skeleton /> <img = = /> /* <audio ref={ref} data-src={url} />*/ /* <iframe ref={ref} data-src={url} />*/ /* <video ref={ref} data-src={url} />*/ /* <div style={{ backgroundImage: `url(${url})` }}></div>*/ </div>
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.
const ref hasLoaded =
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