{"repo":"pgilad/react-page-visibility","free":true,"listed":false,"github":"https://github.com/pgilad/react-page-visibility","clone":"git clone https://github.com/pgilad/react-page-visibility.git","description":"Declarative, nested, stateful, isomorphic page visibility React component","language":"JavaScript","stars":226,"topics":["page-visibility","api","browser","stateful","react","react-hook"],"license":"MIT","category":"api-integrations-sdks","readme_excerpt":"React Page Visibility Declarative, nested, stateful, isomorphic page visibility for React 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 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 Using onChange callback Using children as function callback API react-page-visibili","default_branch":null,"files":null,"tree":[],"storefront":"/r/pgilad","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/pgilad/react-page-visibility/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}