lazyload-hook

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

)
}
`

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 (



)
}
`

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



``

Caveats

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