React Is In Viewport

The component allows to track the other React components whether or not it is in the Viewport.

---

Installation

To install, you can use npm or yarn:

$ npm install react-is-in-viewport
$ yarn add react-is-in-viewport

Props

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 autoTrack only works with type = fit

Here is how type = 'fit' and type = 'overlap' look like:

fit

overlap

API

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

Example

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'));

License

This project is licensed under the MIT License - see the LICENSE file for details