-
-
Save direisc/58a54b20dfbd2b9fb94ac636ba969468 to your computer and use it in GitHub Desktop.
useDocumentVisibility (react hook)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import useEventListener from './useEventListener'; | |
| function getVisibilityPropertyNames() { | |
| // Opera 12.10 and Firefox 18 and later support | |
| if (typeof document.hidden !== 'undefined') { | |
| return ['hidden', 'visibilitychange']; | |
| } | |
| if (typeof document.msHidden !== 'undefined') { | |
| return ['msHidden', 'msvisibilitychange']; | |
| } | |
| if (typeof document.webkitHidden !== 'undefined') { | |
| return ['webkitHidden', 'webkitvisibilitychange']; | |
| } | |
| return ['hidden', 'visibilitychange']; | |
| } | |
| const [hidden, visibilityChange] = getVisibilityPropertyNames(); | |
| function isDocumentHidden() { | |
| return document[hidden]; | |
| } | |
| if (typeof document.addEventListener === 'undefined' || hidden === undefined) { | |
| console.log( | |
| 'This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.', | |
| ); | |
| } | |
| export function useDocumentVisibilityChange(callback) { | |
| const onChange = React.useCallback(() => { | |
| callback(isDocumentHidden()); | |
| }, [callback]); | |
| useEventListener(visibilityChange, onChange, document); | |
| } | |
| export function useDocumentVisibility() { | |
| const [isHidden, setHidden] = React.useState(isDocumentHidden()); | |
| const onChange = React.useCallback(state => setHidden(state), [setHidden]); | |
| useDocumentVisibilityChange(onChange); | |
| return isHidden; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| function useEventListener(eventName, handler, element = global) { | |
| const savedCallback = React.useRef(); | |
| React.useEffect(() => { | |
| savedCallback.current = handler; | |
| }, [handler]); | |
| React.useEffect(() => { | |
| // Make sure element supports addEventListener | |
| const isSupported = element && element.addEventListener; | |
| if (!isSupported) { | |
| return; | |
| } | |
| const eventListener = event => savedCallback.current(event); | |
| element.addEventListener(eventName, eventListener); | |
| // eslint-disable-next-line consistent-return | |
| return () => { | |
| element.removeEventListener(eventName, eventListener); | |
| }; | |
| }, [eventName, element]); | |
| } | |
| export default useEventListener; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment