A lazy loading image component that applies React Hooks based on IntersectionObserver API
npm install react-hook-lazy-image
jsx
// 使用yarn安装
yarn add react-hook-lazy-image
// 使用npm安装
npm install react-hook-lazy-image --save
`
使用
`jsx
import React from 'react';
import LazyImage from 'react-hook-lazy-image';
const list = [ // image src url ...];
const LazyLoad:React.FC = () => {
const clientHeight = window.innerHeight;
const style = {height: 300, width: 400, border: '1px solid #000', margin: '10px'};
return (
${clientHeight-100}px, overflow: 'auto'}}>
{
list.map((item, i) => (
))
}
)
}
export default LazyLoad;
``