scroll-load-component v1.0.1

scroll-load-component

基于IntersectionObserver实现的React滚动加载组件

Installation

$ npm i --save scroll-load-component

Usage

import React from 'react'
import ScrollLoadComponent from 'scroll-load-component'

class MyComponent extends React.Component {
    render() {
        return (
            <div style={{ width: '100vw', height: '100vh', textAlign: 'center', overflow: 'auto' }} id="myComponent">
                {
                    Array(100).fill(1).map((v, i) =>
                        <ScrollLoadComponent
                            root={document.getElementById('myComponent')}
                            loading={<div style={{ height: '500px' }}>loading</div>}>
                            <div>
                                <img width={400} height={400} alt="img" src={"https://api.dujin.org/bing/1920.php"}></img>
                            </div>
                        </ScrollLoadComponent>)
                }
            </div>
        )
    }
}

export default MyComponent

Props