The component allows to track the other React components whether or not it is in the Viewport.
To install, you can use npm or yarn:
$ npm install react-is-in-viewport
$ yarn add react-is-in-viewport| Name | Type | Default value | Description |
|---|---|---|---|
| children | React Node or string | React component or string that display in UI | |
| delay | number | 100 | Delay time to execute scrolling event callback |
| type | 'fit' or 'overlap' | fit | Mode to track component fits in the viewport or overlaps with viewport |
| id | string | Identifier of Viewport | |
| className | string | Custom CSS class | |
| autoTrack | boolean | false | It will count how many seconds the user spending on the component |
| waitToStartAutoTrack | number | After waiting how many seconds, then starting the auto track on the component |
The
autoTrackonly works withtype = fit
Here is how type = 'fit' and type = 'overlap' look like:
fit
overlap
| Name | Type | Parameter | Description |
|---|---|---|---|
| onLoad | void | When components first appear and fit in the viewport | |
| onEnter | void | enterCount | When scrolling to a component, the enterCount increase 1 |
| onLeave | void | leaveCount | When scrolling away from a component, the leaveCount increase 1 |
| onFocusOut | void | focusCount | When component is not in the viewport, then onFocusOut called with seconds user spent on the component |
With overlap & fit mode
https://codesandbox.io/s/react-is-in-viewport-fit-overlap-mode-zx897
import ReactDOM from 'react-dom';
import React from 'react';
import { Viewport } from 'react-is-in-viewport';
class App extends React.Component {
render() {
return (
<div>
<div style={{ marginTop: '50%' }}>
<Viewport
type="fit"
onLoad={this.onLoadRed}
onEnter={this.onEnterRed}
onLeave={this.onLeaveRed}
>
<div style={{ height: 100, background: 'red' }}></div>
</Viewport>
</div>
<div style={{ marginTop: '200%' }}>
<Viewport type="overlap" onEnter={this.onEnterBlue} onLeave={this.onLeaveBlue}>
<div style={{ height: 100, background: 'blue' }}></div>
</Viewport>
</div>
</div>
);
}
onLoadRed = () => {
console.log('component RED loaded')
};
onEnterRed = (enterTimes) => {
console.log('enter red', enterTimes);
};
onLeaveRed = (leaveTimes) => {
console.log('leave red', leaveTimes);
};
onEnterBlue = (enterTimes) => {
console.log('enter blue', enterTimes);
};
onLeaveBlue = (leaveTimes) => {
console.log('leave blue', leaveTimes);
};
}
ReactDOM.render(<App />, document.getElementById('root'));With autoTrack & waitToStartAutoTrack mode
https://codesandbox.io/s/react-is-in-viewport-autotrack-mode-9f9vz
import ReactDOM from 'react-dom';
import React from 'react';
import { Viewport } from 'react-is-in-viewport';
class App extends React.Component {
render() {
return (
<div>
<div style={{ marginTop: '50%' }}>
<Viewport
autoTrack
waitToStartAutoTrack={2}
type="fit"
onLoad={this.onLoadRed}
onEnter={this.onEnterRed}
onLeave={this.onLeaveRed}
onFocusOut={this.onFocusOut}
>
<div style={{ height: 100, background: 'red' }}></div>
</Viewport>
</div>
<div style={{ marginTop: '200%' }}>
<Viewport type="overlap" onEnter={this.onEnterBlue} onLeave={this.onLeaveBlue}>
<div style={{ height: 100, background: 'blue' }}></div>
</Viewport>
</div>
</div>
);
}
onLoadRed = () => {
console.log('component RED loaded')
};
onEnterRed = (enterTimes) => {
console.log('enter red', enterTimes);
};
onLeaveRed = (leaveTimes) => {
console.log('leave red', leaveTimes);
};
onFocusOut = (focusTimes) => {
console.log('out focus red', focusTimes);
};
onEnterBlue = (enterTimes) => {
console.log('enter blue', enterTimes);
};
onLeaveBlue = (leaveTimes) => {
console.log('leave blue', leaveTimes);
};
}
ReactDOM.render(<App />, document.getElementById('root'));This project is licensed under the MIT License - see the LICENSE file for details
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
The build
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent