Neurotic Pumpkin Murderer

    react-scroll-load
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    react-scroll-load

    一个用于懒加载(滚动加载)的 React 组件 Build Status

    • 基于IntersectionObserver实现(兼容低版本浏览器)
    • 不添加额外DOM结构,不影响布局
    • 局部/全局懒加载
      <div>
        <div>prev content</div>
        <ScrollLoad placeholder={<PlaceholderComponent />}>
          <LazyComponent />
        </ScrollLoad>
        <div>next content</div>
      </div>

    安装

    $ yarn add react-scroll-load

    使用

    一个简易的demo 打开开发者工具查看 DOM 变化

    import React, { Component } from 'react'
    import { render } from 'react-dom'
    import ScrollLoad from 'react-scroll-load'
    class App extends Component {
      render() {
        return (
          <div style={{ width: 600, height: 400, overflow: 'auto' }}>
            <div style={{ height: 200, backgroundColor: 'gray' }}></div>
            <ScrollLoad
              placeholder={<div style={{ height: 100 }}>placeholder</div>}
            >
              <div>content</div>
            </ScrollLoad>
          </div>
        )
      }
    }
     
    render(<App />, document.getElementById('app'))

    props

    {
        // 未加载前占位组件,默认为null
      placeholder: JSX.Element,
     
        // 设置滚动方向上的偏移
        // 正数:增加触发距离(可见后再滚动`offset`距离)
        // 负数:减少触发距离,提前加载(注意:指定负数offset不要超过placeholder对应宽高的1/2)
        offset?: number,
        // 加载内容时的回调
        onLoad?: () => void
    }

    更新日志

    ChangeLog

    Install

    npm i react-scroll-load

    DownloadsWeekly Downloads

    1

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    14.4 kB

    Total Files

    23

    Last publish

    Collaborators

    • limoer