Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pgilad/react-page-visibility
Declarative, nested, stateful, isomorphic page visibility React component
https://github.com/pgilad/react-page-visibility
api browser page-visibility react react-hook stateful
Last synced: about 24 hours ago
JSON representation
Declarative, nested, stateful, isomorphic page visibility React component
- Host: GitHub
- URL: https://github.com/pgilad/react-page-visibility
- Owner: pgilad
- License: mit
- Created: 2016-05-01T10:29:52.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-04-19T14:34:11.000Z (almost 3 years ago)
- Last Synced: 2024-04-14T09:03:47.546Z (10 months ago)
- Topics: api, browser, page-visibility, react, react-hook, stateful
- Language: JavaScript
- Homepage:
- Size: 150 KB
- Stars: 223
- Watchers: 5
- Forks: 11
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Page Visibility
> Declarative, nested, stateful, isomorphic page visibility for React
[](https://travis-ci.org/pgilad/react-page-visibility)
## Motivation
Are you polling your Backend on an interval basis? Are you running animations? What do you do if your tab is no longer visible?
See more classic use-cases in [MDN Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API#Use_cases).
Well now you can react (Pun intended) to your app being in the background and invisible by conserving bandwidth and GPU calculations with ease.
Introduction **React Page Visibility**:
- A React [higher order component](https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e) that wraps the page visibility API
- Cross-browser support (Yes, even IE and Safari)
- Safe fallback if browser does not support it
- Can be used multiple times anywhere in your application without side effects
- Lets you decide how to handle the page being invisible and turning visible again
### Why use a React component and not a helper function?
Because React is cool. 'Nuff said.
But really, why not use a helper function?
Because you will then need to `addEventListener` and `removeEventListener` in your component lifecycle and that gets tedious.
Also, every time you use it you will need to check if your user's browser supports it and that gets tedious too.
Instead with `react-page-visibility` everything is taken care of for you.
## Installation
```js
$ npm install --save react-page-visibility
```
## Usage
A rotating carousel component that will be passed down a prop of whether to rotate the images or not based on whether page is visible.
## Using the `usePageVisibility` hook
```js
import React from 'react';
import { usePageVisibility } from 'react-page-visibility';
const AppContainer = () => {
const isVisible = usePageVisibility()
return
}
```
### Using `onChange` callback
```js
import React from 'react';
import PageVisibility from 'react-page-visibility';
class AppContainer extends React.Component {
state = {
rotate: true
};
handleVisibilityChange = isVisible => {
this.setState({ rotate: !isVisible });
}
render() {
return (
);
}
}
```
## Using `children` as function callback
```js
import React from 'react';
import PageVisibility from 'react-page-visibility';
const AppContainer = () => {
return (
{ isVisible => }
);
}
```
## API
`react-page-visibility` is an higher order component, you can pass to it an `onChange` function:
`onChange(handler)`
Where `handler` is the callback to run when the `visibilityState` of the document changes:
`Function handler( isVisible, visibilityState)`
- `isVisible` is a Boolean indicating whether document is considered visible to the user or not.
- `visibilityState` is a String and can be one of `visible`, `hidden`, `prerender`, `unloaded` (if your browser supports those)
**Notice: previous versions had different arguments in the `handler`**
Or you can use [function as children](https://reactpatterns.com/#function-as-children) pattern,
where `children` is the callback to run when the `visibilityState` of the document changes.
`Function children( isVisible, visibilityState)`
See [MDN Page Visibility API Properties overview](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API#Properties_overview)
## License
MIT © [Gilad Peleg](https://www.giladpeleg.com)