Tracking when any of your components show up in the viewport of a user.
npm install react-find-while-scrolling
import FindWhileScrolling from 'react-find-while-scrolling'
class Title extends Component {
state = {
visible: false,
};
handleVisible = () => {
this.setState({
visible: true,
}, () => {
console.log('Found title');
});
};
render = () => {
return (
<FindWhileScrolling
active
onVisibleHandler={this.handleVisible}>
<article
className="pa3 pa5-ns mt7">
<h1
className="f3 f1-m f-headline-l">Title</h1>
<p
className="measure lh-copy">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p
className="measure lh-copy">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</article>
</FindWhileScrolling>
);
};
}
active
: Boolean, defaulttrue
.peek
: Boolean or One foleft
,right
,bottom
&top
.onVisibleHandler
: Function,callback(<Visible Boolean>, <Visible Rectangle Object>)
.intervalCheck
: Boolean, UsesetInterval
to find the items.scrollCheck
: Boolean, Usescroll
event to find the items.intervalDelay
: Number, default1000
.setInterval
timing.wrapperEl
: Element, defaultdocument
.children
: Element, the element to be tracked.minimumGutter
: Number, default0
.killAfterFind
: Boolean, Kill the find of events after the first time.className
: String,
git clone https://github.com/sylvesteraswin/react-find-while-scrolling
npm install
npm start
MIT
Feel free to contribute and or provide feedback.