fluse / react-tab-visibility

listen to browser tab visibilitychange and get inactive time

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

Install

npm install react-tab-visibility --save

How to use

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

get in touch?