{"id":15699000,"url":"https://github.com/pgilad/react-page-visibility","last_synced_at":"2025-04-04T10:03:49.054Z","repository":{"id":42002130,"uuid":"57594270","full_name":"pgilad/react-page-visibility","owner":"pgilad","description":"Declarative, nested, stateful, isomorphic page visibility React component","archived":false,"fork":false,"pushed_at":"2022-04-19T14:34:11.000Z","size":154,"stargazers_count":223,"open_issues_count":2,"forks_count":11,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-14T09:03:47.546Z","etag":null,"topics":["api","browser","page-visibility","react","react-hook","stateful"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pgilad.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-01T10:29:52.000Z","updated_at":"2024-03-21T15:45:16.000Z","dependencies_parsed_at":"2022-08-12T02:00:42.637Z","dependency_job_id":null,"html_url":"https://github.com/pgilad/react-page-visibility","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pgilad%2Freact-page-visibility","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pgilad%2Freact-page-visibility/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pgilad%2Freact-page-visibility/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pgilad%2Freact-page-visibility/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pgilad","download_url":"https://codeload.github.com/pgilad/react-page-visibility/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247150616,"owners_count":20892171,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","browser","page-visibility","react","react-hook","stateful"],"created_at":"2024-10-03T19:37:20.047Z","updated_at":"2025-04-04T10:03:49.032Z","avatar_url":"https://github.com/pgilad.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Page Visibility\n\u003e Declarative, nested, stateful, isomorphic page visibility for React\n\n[![Build Status](https://travis-ci.org/pgilad/react-page-visibility.svg?branch=master)](https://travis-ci.org/pgilad/react-page-visibility)\n\n## Motivation\n\nAre you polling your Backend on an interval basis? Are you running animations? What do you do if your tab is no longer visible?\n\nSee more classic use-cases in [MDN Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API#Use_cases).\n\nWell now you can react (Pun intended) to your app being in the background and invisible by conserving bandwidth and GPU calculations with ease.\nIntroduction **React Page Visibility**:\n\n- A React [higher order component](https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e) that wraps the page visibility API\n- Cross-browser support (Yes, even IE and Safari)\n- Safe fallback if browser does not support it\n- Can be used multiple times anywhere in your application without side effects\n- Lets you decide how to handle the page being invisible and turning visible again\n\n### Why use a React component and not a helper function?\n\nBecause React is cool. 'Nuff said.\n\nBut really, why not use a helper function?\nBecause you will then need to `addEventListener` and `removeEventListener` in your component lifecycle and that gets tedious.\n\nAlso, every time you use it you will need to check if your user's browser supports it and that gets tedious too.\n\nInstead with `react-page-visibility` everything is taken care of for you.\n\n## Installation\n\n```js\n$ npm install --save react-page-visibility\n```\n\n## Usage\n\nA rotating carousel component that will be passed down a prop of whether to rotate the images or not based on whether page is visible.\n\n## Using the `usePageVisibility` hook\n\n```js\nimport React from 'react';\nimport { usePageVisibility } from 'react-page-visibility';\n\nconst AppContainer = () =\u003e {\n    const isVisible = usePageVisibility()\n\n    return \u003cRotatingCarousel rotate={isVisible} /\u003e\n}\n```\n\n### Using `onChange` callback\n\n```js\nimport React from 'react';\nimport PageVisibility from 'react-page-visibility';\n\nclass AppContainer extends React.Component {\n    state = {\n        rotate: true\n    };\n\n    handleVisibilityChange = isVisible =\u003e {\n        this.setState({ rotate: !isVisible });\n    }\n\n    render() {\n        return (\n            \u003cPageVisibility onChange={this.handleVisibilityChange}\u003e\n                \u003cRotatingCarousel rotate={this.state.rotate} /\u003e\n            \u003c/PageVisibility\u003e\n        );\n    }\n}\n```\n\n## Using `children` as function callback\n\n```js\nimport React from 'react';\nimport PageVisibility from 'react-page-visibility';\n\nconst AppContainer = () =\u003e {\n    return (\n        \u003cPageVisibility\u003e\n            { isVisible =\u003e \u003cRotatingCarousel rotate={isVisible} /\u003e }\n        \u003c/PageVisibility\u003e\n    );\n}\n```\n\n## API\n\n`react-page-visibility` is an higher order component, you can pass to it an `onChange` function:\n\n`onChange(handler)`\n\nWhere `handler` is the callback to run when the `visibilityState` of the document changes:\n\n`Function handler(\u003cBoolean\u003e isVisible, \u003cString\u003e visibilityState)`\n\n- `isVisible` is a Boolean indicating whether document is considered visible to the user or not.\n- `visibilityState` is a String and can be one of `visible`, `hidden`, `prerender`, `unloaded` (if your browser supports those)\n\n**Notice: previous versions had different arguments in the `handler`**\n\nOr you can use [function as children](https://reactpatterns.com/#function-as-children) pattern,\nwhere `children` is the callback to run when the `visibilityState` of the document changes.\n\n`Function children(\u003cBoolean\u003e isVisible, \u003cString\u003e visibilityState)`\n\nSee [MDN Page Visibility API Properties overview](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API#Properties_overview)\n\n## License\n\nMIT © [Gilad Peleg](https://www.giladpeleg.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpgilad%2Freact-page-visibility","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpgilad%2Freact-page-visibility","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpgilad%2Freact-page-visibility/lists"}