https://github.com/saitolume/use-lazyload-ref

🖼️ Custom hook to use lazyload easily
https://github.com/saitolume/use-lazyload-ref

custom-hook lazyload react

Last synced: 3 months ago
JSON representation

🖼️ Custom hook to use lazyload easily

• Host: GitHub
• URL: https://github.com/saitolume/use-lazyload-ref
• Owner: saitolume
• License: mit
• Created: 2019-12-30T11:49:41.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-10-13T16:44:16.000Z (over 4 years ago)
• Last Synced: 2025-03-30T20:33:38.417Z (3 months ago)
• Topics: custom-hook, lazyload, react
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/use-lazyload-ref
• Size: 109 KB
• Stars: 58
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-lazyload-ref

[![GitHub license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/saitoeku3/use-lazyload-ref/blob/master/LICENSE) [![npm version](https://badge.fury.io/js/use-lazyload-ref.svg)](https://badge.fury.io/js/use-lazyload-ref) ![CI Status](https://github.com/saitoeku3/use-lazyload-ref/workflows/Node%20CI/badge.svg)

> 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.

```jsx

import React from 'react'

import useLazyloadRef from 'use-lazyload-ref'

const Component = ({ url }) => {

  const [ref, hasLoaded] = useLazyloadRef()

  return (

    


      {hasLoaded || }

      

      {/* */}

      {/* */}

      {/* */}

      {/* 
*/}

    

  )

}

```


## 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.

```jsx

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