redux-saga-document-visibility
Saga dispatch action if the page content is not visible to the user. The Page Visibility API uses.
Install
yarn add redux-saga-document-visibility redux-saga @babel/runtime
Install with Npm
npm install redux-saga-document-visibility redux-saga @babel/runtime
Usage Example
main.js
;; ; ;; const sagaMiddleware = ;const store = ; sagaMiddleware; // then run the document-visibility sagaconst timeoutDelay = 30 * 1000; // 30 sec.const visibilitySaga = ; // Create sagasagaMiddleware;
sagas.js
; { while true const payload = ; console; if payloadvisibility // do something }
Example
- Background Sync : React + Redux + redux-saga + react-router (API firebase.firestore)
- Webpack adn Babel config for compile build without Babel Runtime
Options
createVisibleChangeSaga(timeoutDelay: Number)
- Time in ms (default: 30000ms)
The user can switch to other tabs during work and return to this tab, the timeoutDelay
help to reduce reconnection count
timeoutDelay
work only for document.visibilityState !== 'visible'
This means that if the user returns to this tab, the saga will dispatch the action (change) immediately. Having processed it you can reconnections to the runtime service (socket
, firebase.firestore
, ...)
CommonJS modules & ES modules
When Babel@7 will be released, I will delete the old js bundel.
; // CommonJS; // ESM