https://github.com/luqmanoop/use-page-visibility
Dead-simple, React hook lib for detecting page visibility 👁️
https://github.com/luqmanoop/use-page-visibility
Last synced: about 1 year ago
JSON representation
Dead-simple, React hook lib for detecting page visibility 👁️
- Host: GitHub
- URL: https://github.com/luqmanoop/use-page-visibility
- Owner: luqmanoop
- License: mit
- Created: 2019-09-04T13:12:15.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T09:01:26.000Z (over 3 years ago)
- Last Synced: 2025-04-06T22:33:00.136Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://use-page-visibility.netlify.com
- Size: 272 KB
- Stars: 48
- Watchers: 0
- Forks: 5
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-page-visibility
Dead-simple, React hook lib for detecting page visibility 👁️
## Demo
https://use-page-visibility.netlify.com/
## Prerequisite
- [React 16.8+](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html)
## Installation
```bash
npm install use-page-visibility
```
or with yarn
```bash
yarn add use-page-visibility
```
## Usage
```jsx
...
import usePageVisibility from 'use-page-visibility';
function App() {
const handleVisibilityChange = visible => {
return visible ? playVideo() : pauseVideo()
}
usePageVisibility(handleVisibilityChange);
return (...)
}
```
## Api
`usePageVisibility(fn, delay)`
### fn
Type: `function`
Callback function to run when page visibility changes. A boolean value (indicating whether the page is visible or not) will be passed as an argument to this function.
### delay (optional)
Type: `number`
Number of milliseconds to wait before responding to page visibility change
## Related
- [react-thanos](https://github.com/codeshifu/react-thanos) - React hooks implementation of Google's "Thanos" easter egg
## Author
[Olushi Luqman Opemipo](https://twitter.com/codeshifu)
## License
This project is licensed under [MIT](https://github.com/codeshifu/use-page-visibility/blob/master/LICENSE)