React Page Visible

!alt React Page Visible Demo

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.

See demo

Example

``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
``