Need help with react-page-visibility?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

pgilad
172 Stars 12 Forks MIT License 79 Commits 1 Opened issues

Description

Declarative, nested, stateful, isomorphic page visibility React component

Services available

!
?

Need anything else?

Contributors list

# 15,833
rhel
Express
express...
jQuery
71 commits
# 63,047
React
CSS
reactjs
HTML
2 commits
# 22,360
React
CSS
Node.js
node
1 commit
# 544,714
PHP
C#
statefu...
react-h...
1 commit
# 200,527
React
nextjs
Redux
HTML
1 commit
# 110,266
HTML
CSS
Three.j...
fiber
1 commit
# 143,128
Elixir
Haskell
elm
Rails
1 commit

React Page Visibility

Declarative, nested, stateful, isomorphic page visibility for React

Build Status

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.

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

$ 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

import React from 'react';
import { usePageVisibility } from 'react-page-visibility';

const AppContainer = () => { const isVisible = usePageVisibility()

return <rotatingcarousel rotate="{isVisible}"></rotatingcarousel>

}

Using
onChange
callback

import React from 'react';
import PageVisibility from 'react-page-visibility';

class AppContainer extends React.Component { state = { rotate: true };

handleVisibilityChange = isVisible =&gt; {
    this.setState({ rotate: !isVisible });
}

render() {
    return (
        <pagevisibility onchange="{this.handleVisibilityChange}">
            <rotatingcarousel rotate="{this.state.rotate}"></rotatingcarousel>
        </pagevisibility>
    );
}

}

Using
children
as function callback

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

License

MIT © Gilad Peleg

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.