Skip to content

πŸš€πŸ“±The component allows to detect whether or not the component is in the viewport πŸš€πŸ“±

License

Notifications You must be signed in to change notification settings

davidnguyen11/react-is-in-viewport

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

38 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

React Is In Viewport

fit-overlap

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


version codecov Build Status Greenkeeper badge License: MIT PRs Welcome quality

Package Quality

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

fit

overlap

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