# lazyload-hook

> ## Install ``` npm install --save lazyload-hook ```

Latest version **0.1.3** (published 2023-01-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install lazyload-hook
pnpm add lazyload-hook
yarn add lazyload-hook
bun add lazyload-hook
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2023-01-02 |
| First published | 2020-08-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 8.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Jérémie Dubuis |
| Maintainers | jeremiedubuis |

## Links

- npm: https://www.npmjs.com/package/lazyload-hook
- Repository: https://github.com/jeremiedubuis/lazyload-hook
- Homepage: https://github.com/jeremiedubuis/lazyload-hook#readme
- Issues: https://github.com/jeremiedubuis/lazyload-hook/issues
- npm.io page: https://npm.io/package/lazyload-hook

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^18.2.0

## Recent versions

- 0.1.3 (latest) — 2023-01-02
- 0.1.2 — 2023-01-02
- 0.1.1 — 2023-01-02
- 0.1.0 — 2021-11-10
- 0.0.8 — 2020-10-07
- 0.0.7 — 2020-10-07
- 0.0.6 — 2020-10-05
- 0.0.5 — 2020-10-04
- 0.0.4 — 2020-10-04
- 0.0.3 — 2020-10-03
- 0.0.2 — 2020-10-03
- 0.0.1 — 2020-08-18

## README

#lazyload-hook

## Install
```
npm install --save lazyload-hook
```

## Usage

```
import * as React from 'react';

import { useLazyLoad } from 'lazyload-hook';

const options = {
  root: null,
  rootMargin: "0px",
  thresholds: [0.0],
};
const Example = () => {
  const [ref] = useLazyload(options);
  return (
    <img ref={ref} data-src="https://picsum.photos/id/0/300/300" alt="" />
  )
}
```

Also works with data-srcset.

## Usage on non image components

```
import React, { useState } from "react";
import { useLazyLoad } from 'lazyload-hook';
import Component from './Component';

const options = {
  root: null,
  rootMargin: "0px",
  thresholds: [0.0],
};
const Example = () => {
  const [displayContent, setDisplayContent] = useState(false);
  const [ref] = useLazyload(options, () => setDisplayContent(true);
  return (
    <div ref={ref}>
        { displayContent && <Component /> }
    </div>
  )
}
```

## Using the LazyLoad compoennt

```
import React from "react";
import { LazyLoad } from 'lazyload-hook';
import Component from './Component';

const options = {
  root: null,
  rootMargin: "0px",
  thresholds: [0.0],
};
const Example = () => 
    <LazyLoad options={options}>
        <Component />
    </LazyLoad>
```

## Caveats

When using this hook for a dynamically updating component be sure to give unique IDs to lazyloaded components or dynamically updated parents.

---
_Source: https://npm.io/package/lazyload-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._