Dead-simple, React hook lib for detecting page visibility 👁️

use-page-visibility Dead-simple, React hook lib for detecting page visibility 👁️ Demo https://use-page-visibility.netlify.com/ Prerequisite React 16.8+ Installation npm install u

README
Issues 8

use-page-visibility

Demo

https://use-page-visibility.netlify.com/

Prerequisite

React 16.8+

Installation

npm install use-page-visibility

or with yarn

yarn add use-page-visibility

Usage

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

react-thanos - React hooks implementation of Google's "Thanos" easter egg

Author

Olushi Luqman Opemipo

License

This project is licensed under MIT

4 Open More issues

Closed

Calling the latest callback

Make sure the latest callback passed to usePageVisibility is used instead of the old one. Issue raised by @kentcdodds https://twitter.com/kentcdodds/status/1170402338017689600

Ref https://overreacted.io/making-setinterval-declarative-with-react-hooks/#refs-to-the-rescue

opened Sep 10, 2019 by codeshifu 0

Closed

Fix/use latest callback

Use the latest callback when user-provided callback changes

opened Sep 10, 2019 by codeshifu 0

Closed

build(deps): bump lodash from 4.17.15 to 4.17.19

Bumps lodash from 4.17.15 to 4.17.19.

Release notes

Sourced from lodash's releases.

4.17.16

Commits

d7fbc52 Bump to v4.17.19
2e1c0f2 Add npm-package
1b6c282 Bump to v4.17.18
a370ac8 Bump to v4.17.17
1144918 Rebuild lodash and docs
3a3b0fd Bump to v4.17.16
c84fe82 fix(zipObjectDeep): prototype pollution (#4759)
e7b28ea Sanitize sourceURL so it cannot affect evaled code (#4518)
0cec225 Fix lodash.isEqual for circular references (#4320) (#4515)
94c3a81 Document matches* shorthands for over* methods (#4510) (#4514)
Additional commits viewable in compare view

Maintainer changes

This version was pushed to npm by mathias, a new releaser for lodash since your current version.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
@dependabot use these labels will set the current labels as the default for future PRs for this repo and language
@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies

opened Jul 18, 2020 by dependabot[bot] 0

Closed

build(deps): bump ini from 1.3.5 to 1.3.7

Bumps ini from 1.3.5 to 1.3.7.

Commits

c74c8af 1.3.7
024b8b5 update deps, add linting
032fbaf Use Object.create(null) to avoid default object property hazards
2da9039 1.3.6
cfea636 better git push script, before publish instead of after
56d2805 do not allow invalid hazardous string as section name
See full diff in compare view

Maintainer changes

This version was pushed to npm by isaacs, a new releaser for ini since your current version.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
@dependabot use these labels will set the current labels as the default for future PRs for this repo and language
@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies

opened Dec 11, 2020 by dependabot[bot] 0

Open

build(deps): bump browserslist from 4.7.0 to 4.16.6

Bumps browserslist from 4.7.0 to 4.16.6.

Changelog

Sourced from browserslist's changelog.

4.16.6

Fixed npm-shrinkwrap.json support in --update-db (by Geoff Newman).

4.16.5

Fixed unsafe RegExp (by Yeting Li).

4.16.4

Fixed unsafe RegExp.

Added artifactory support to --update-db (by Ittai Baratz).

4.16.3

Fixed --update-db.

4.16.2

Fixed --update-db (by @ialarmedalien).

4.16.1

Fixed Chrome 4 with mobileToDesktop (by Aron Woost).

4.16

Add browserslist config query.

4.15

Add TypeScript types (by Dmitry Semigradsky).

4.14.7

Fixed Yarn Workspaces support to --update-db (by Fausto Núñez Alberro).

Added browser changes to --update-db (by @AleksandrSl).

Added color output to --update-db.

Updated package.funding to have link to our Open Collective.

4.14.6

Fixed Yarn support in --update-db (by Ivan Storck).

Fixed npm 7 support in --update-db.

4.14.5

Fixed last 2 electron versions query (by Sergey Melyukov).

4.14.4

Fixed Unknown version 59 of op_mob error.

4.14.3

Update Firefox ESR.

4.14.2

Fixed --update-db on Windows (by James Ross).

Improved --update-db output.

4.14.1

Added --update-db explanation (by Justin Zelinsky).

... (truncated)

Commits

6fe3614 Release 4.16.6 version
33ebac9 Update dependencies
2128170 Add support for npm-shrinkwrap files alongside package-lock (#595)
7cc2aed Release 4.16.5 version
27e4afd Update dependencies
1013a18 Fix version RegExp
b879a1a Use Node.js 16 on CI
bd1e9e0 Fix ReDoS (#593)
209adf9 Release 4.16.4 version
3e2ae3b Fix types
Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
@dependabot use these labels will set the current labels as the default for future PRs for this repo and language
@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies

opened May 25, 2021 by dependabot[bot] 0

Open

build(deps): bump hosted-git-info from 2.8.4 to 2.8.9

Bumps hosted-git-info from 2.8.4 to 2.8.9.

Changelog

Sourced from hosted-git-info's changelog.

2.8.9 (2021-04-07)

Bug Fixes

backport regex fix from #76 (29adfe5), closes #84

2.8.8 (2020-02-29)

Bug Fixes

#61 & #65 addressing issues w/ url.URL implmentation which regressed node 6 support (5038b18), closes #66

2.8.7 (2020-02-26)

Bug Fixes

Do not attempt to use url.URL when unavailable (2d0bb66), closes #61 #62

Do not pass scp-style URLs to the WhatWG url.URL (f2cdfcf), closes #60

2.8.6 (2020-02-25)

2.8.5 (2019-10-07)

Bug Fixes

updated pathmatch for gitlab (e8325b5), closes #51

updated pathmatch for gitlab (ffe056f)

Commits

8d4b369 chore(release): 2.8.9
29adfe5 fix: backport regex fix from #76
afeaefd chore(release): 2.8.8
5038b18 fix: #61 & #65 addressing issues w/ url.URL implmentation which regressed nod...
7440afa chore(release): 2.8.7
2d0bb66 fix: Do not attempt to use url.URL when unavailable
f2cdfcf fix: Do not pass scp-style URLs to the WhatWG url.URL
e1b83df chore(release): 2.8.6
ff259a6 Ensure passwords in hosted Git URLs are correctly escaped
624fd6f chore(release): 2.8.5
Additional commits viewable in compare view

Maintainer changes

This version was pushed to npm by nlf, a new releaser for hosted-git-info since your current version.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
@dependabot use these labels will set the current labels as the default for future PRs for this repo and language
@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies

opened May 10, 2021 by dependabot[bot] 0

Open

build(deps): bump lodash from 4.17.19 to 4.17.21

Bumps lodash from 4.17.19 to 4.17.21.

Commits

f299b52 Bump to v4.17.21
c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
3469357 Prevent command injection through _.template's variable option
ded9bc6 Bump to v4.17.20.
63150ef Documentation fixes.
00f0f62 test.js: Remove trailing comma.
846e434 Temporarily use a custom fork of lodash-cli.
5d046f3 Re-enable Travis tests on 4.17 branch.
aa816b3 Remove /npm-package.
See full diff in compare view

Maintainer changes

This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
@dependabot use these labels will set the current labels as the default for future PRs for this repo and language
@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies

opened May 10, 2021 by dependabot[bot] 0

Open

build(deps): bump dot-prop from 4.2.0 to 4.2.1

Bumps dot-prop from 4.2.0 to 4.2.1.

Release notes

Sourced from dot-prop's releases.

v4.2.1

Backport https://github.com/sindresorhus/dot-prop/commit/3039c8c07f6fdaa8b595ec869ae0895686a7a0f2 to the v4.x release line.

Commits

c914124 feat: patch 4.2.0 with fixes for CVE-2020-8116
See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
@dependabot use these labels will set the current labels as the default for future PRs for this repo and language
@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies

opened Feb 14, 2021 by dependabot[bot] 0

Information

Category: React / Miscellaneous
Watchers: 0
Star: 45
Fork: 4
Last update: Jul 30, 2021

Resource links

https://use-page-visibility.netlify.com

https://github.com/codeshifu/use-page-visibility

Share this repo

Related Repos

Miscellaneous

The simplest action creator for redux

action-helper The simplest action creator for redux. Install npm install --save action-helper Why? To reduce code generation. I was dead tired to write all these actions each time. const CONSTANT =

Miscellaneous

A http client wrapper for fetch api with middleware support.

Fetch Http Client A http client wrapper for Fetch API with middleware support. Introduction Fetch API is a elegant way to access HTTP resources. I used it in my React/ReactNative project as the default network la

Miscellaneous

869

React component to PNG converter

repng React component to PNG converter, built with Puppeteer npm i -g repng repng Icon.js --width 512 --height 512 --out-dir assets Usage $ repng <ReactComponent> Options -d --out-dir Directory to save fi

Miscellaneous

5.5k

This repo is suspended.

WARNING: This project is outdated and not maintained anymore. Este react react-native react-native-web nextjs zeit.co/now typescriptlang.org graphql.org relay prisma nexusjs apollo-server Prer

Miscellaneous

262

Saga monitor and UI devtool for redux-saga

A Visual redux-saga monitor this is still a WIP How does it relate to other Redux devtools? This would of course endup as a browser extension (chrome, firefox). But also intended to release as a themable React Component (or man

Miscellaneous

An Class-Based System for Creating Redux Reducers

Classy-Redux A "Classier" system of creating Redux reducer functions Basic Example Classy Redux let's you convert this (from the Redux To Do example): const todo = (state = {}, action) => { switch (action.type

Miscellaneous

216

A graphical interactive in-browser GraphQL IDE enhanced with tabbed navigation, HTTP heade...

GraphiQL Workspace A graphical interactive in-browser GraphQL IDE (GraphiQL), enhanced with following features: Tabbed navigation HTTP header editor Arbitrary endpoint support Workspace save/load (as JSON file) Loca

Miscellaneous

4.8k

React bindings for MobX

mobx-react Package with React component wrapper for combining React with MobX. Exports the observer decorator and other utilities. For documentation, see the MobX project. This package supports both React and React Native.