npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-page-visibility

v7.0.0

Published

Declarative, nested, stateful, isomorphic page visibility for React

Downloads

246,046

Readme

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

Using onChange callback

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 (
            <PageVisibility onChange={this.handleVisibilityChange}>
                <RotatingCarousel rotate={this.state.rotate} />
            </PageVisibility>
        );
    }
}

Using children as function callback

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

const AppContainer = () => {
    return (
        <PageVisibility>
            { isVisible => <RotatingCarousel rotate={isVisible} /> }
        </PageVisibility>
    );
}

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(<Boolean> isVisible, <String> 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(<Boolean> isVisible, <String> visibilityState)

See MDN Page Visibility API Properties overview

License

MIT © Gilad Peleg