https://github.com/davidnguyen11/react-is-in-viewport
🚀📱The component allows to detect whether or not the component is in the viewport 🚀📱
https://github.com/davidnguyen11/react-is-in-viewport
autotrack detect-component-in-viewport detection observer react react-components react-typescript react-viewport typescript viewport
Last synced: 3 months ago
JSON representation
🚀📱The component allows to detect whether or not the component is in the viewport 🚀📱
- Host: GitHub
- URL: https://github.com/davidnguyen11/react-is-in-viewport
- Owner: davidnguyen11
- License: mit
- Created: 2019-12-13T06:30:04.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-06-24T13:05:46.000Z (almost 5 years ago)
- Last Synced: 2025-03-16T08:46:18.922Z (3 months ago)
- Topics: autotrack, detect-component-in-viewport, detection, observer, react, react-components, react-typescript, react-viewport, typescript, viewport
- Language: TypeScript
- Homepage:
- Size: 175 KB
- Stars: 15
- Watchers: 0
- Forks: 2
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# React Is In Viewport
The component allows to track the other React components whether or not it is in the Viewport.
[](https://badge.fury.io/js/react-is-in-viewport) [](https://codecov.io/gh/davidnguyen179/react-is-in-viewport) [](https://travis-ci.com/davidnguyen179/react-is-in-viewport) [](https://greenkeeper.io/) [](https://github.com/davidnguyen179/react-is-in-viewport/blob/master/LICENSE) [](http://makeapullrequest.com) [](https://packagequality.com/#?package=react-is-in-viewport)
[](https://packagequality.com/#?package=react-is-in-viewport)
## Installation
To install, you can use [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/lang/en/):
```bash
$ 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](https://codesandbox.io/s/react-is-in-viewport-fit-overlap-mode-zx897)
```jsx
import ReactDOM from 'react-dom';
import React from 'react';
import { Viewport } from 'react-is-in-viewport';
class App extends React.Component {
render() {
return (
);
}
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(, document.getElementById('root'));
```
**With `autoTrack` & `waitToStartAutoTrack` mode**
[https://codesandbox.io/s/react-is-in-viewport-autotrack-mode-9f9vz](https://codesandbox.io/s/react-is-in-viewport-autotrack-mode-9f9vz)
```jsx
import ReactDOM from 'react-dom';
import React from 'react';
import { Viewport } from 'react-is-in-viewport';
class App extends React.Component {
render() {
return (
);
}
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(, document.getElementById('root'));
```
## License
This project is licensed under the MIT License - see the [LICENSE](https://github.com/davidnguyen179/react-is-in-viewport/blob/master/LICENSE) file for details