saitolume / use-lazyload-ref

🖼️ Custom hook to use lazyload easily

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] = useLazyloadRef()

  return (
    <div>
      {hasLoaded || <Skeleton />}
      <img ref={ref} data-src={url} />
      {/* <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()

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