Cross browser and device implementation for Page Visibility API and Browser focus
npm install react-page-visible
There are two common approaches to know if your page is currently visible by the user:
* Focus event
* Page Visibility API
None of the approaches does cover all user cases. For instance, switching to a different application, in desktop enviroment, does not trigger the Visibility API but the focus event. In a mobile device is the opposite. See difference table
This implementation, which is a React Component using render props, also introduces a new visible property which is aimed to cover both approaches and give a consistent behaviour across browsers and mobile devices.
js
import PageVisible from 'react-page-visible'export default class App extends React.Component {
render() {
return (
{({ visibleĀ }) => (
My page is {visible ? 'visible' : 'hidden'}
)}
)
}
}
`Installation
`js
yarn add react-page-visible
`Development
This app is powered by Next.js.Install dependencies
`
yarn
`Start dev server:
`
yarn && yarn dev
``