https://github.com/fluse/react-tab-visibility
listen to browser tab visibilitychange and get inactive time
https://github.com/fluse/react-tab-visibility
component react react-component reactjs tab visibility
Last synced: about 1 year ago
JSON representation
listen to browser tab visibilitychange and get inactive time
- Host: GitHub
- URL: https://github.com/fluse/react-tab-visibility
- Owner: fluse
- Created: 2016-06-20T07:15:16.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2023-01-01T13:54:41.000Z (over 3 years ago)
- Last Synced: 2024-04-25T21:45:27.853Z (about 2 years ago)
- Topics: component, react, react-component, reactjs, tab, visibility
- Language: JavaScript
- Homepage: https://fluse.github.io/react-tab-visibility/
- Size: 2.23 MB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-tab-visbility
supports react 15.x and 16.x
use react-tab-visibility for browser tab activity informations.
Get informed on tab change
Get time of inactivity after reactivation
**[Watch Demo](https://fluse.github.io/react-tab-visibility/)**
## Install
```
npm install react-tab-visibility --save
```
## How to use
```jsx
import TabVisibility from 'react-tab-visibility'
class YourComponent extends TabVisibility {
onTabVisibilityChange({ isTabVisible, hiddenTime }) {
this.setState({ isTabVisible })
console.log(isTabVisible, hiddenTime)
}
}
```
## Development
if you want to add or optimize this component, feel free <3
clone this repository and run install
```
npm install
```
start dev server
```
npm start
```
make your changes and build new es5 friendly version
```
npm run build
```
## Give me a coffee
[](https://www.paypal.me/schauf)
[get in touch?](http://www.holger-schauf.de)