react-on-screen:检查视口中是否有React组件

提供一个组件来包装react组件，并检查屏幕上是否可见。例如，可以使用此组件触发入口动画！

组件只是将isVisible属性 通过props传递给组件。

特征
不依赖于dom 节点。因此，它可以与无状态组件一起使用;
将所有属性转移到包装的组件里;
可见性可以只跟踪一次;
事件侦听器是通过节流实现的，以避免内存泄漏或性能问题.

安装

npm :

$ npm install react-on-screen --save 

样例:解构props的isVisible

import React from 'react';
import TrackVisibility from 'react-on-screen'; // CommonJs : require('react-on-screen').default


const ComponentToTrack = ({ isVisible }) => {
    const style = {
        background: isVisible ? 'red' : 'blue'
    };

    return <div style={style}>Hello</div>;
}

const YourApp = () => {
    return (
       {/* Some Stuff */}
        <TrackVisibility>
            <ComponentToTrack />
        </TrackVisibility>
       {/* Some Stuff */}
    );
}

Api

props	type	default	description
once	bool	false	If set to true track the visibility only once and remove the event listeners
throttleInterval	int	150	Tweak the event listeners. See David Corbacho's article
children	React Components	-	Can be on or many react components
style	object	-	Style attributes
className	string	-	Css classes