redux-saga-document-visibility v2.0.0

redux-saga-document-visibility

Saga dispatch action if the page content is not visible to the user. The Page Visibility API uses.

Can i use IE 10+

Install

yarn add redux-saga-document-visibility redux-saga @babel/runtime

Usage Example

main.js

import { createStore, applyMiddleware } from "redux";
import createSagaMiddleware from "redux-saga";

import { createVisibleChangeSaga } from "redux-saga-document-visibility";

import reducer from "./reducers";
import mySaga from "./sagas";

const sagaMiddleware = createSagaMiddleware();
const store = createStore(reducer, applyMiddleware(sagaMiddleware));

sagaMiddleware.run(mySaga);

// then run the document-visibility saga
const timeoutDelay = 30 * 1000; // 30 sec.
const visibilitySaga = createVisibleChangeSaga(timeoutDelay); // Create saga
sagaMiddleware.run(visibilitySaga);

sagas.js

import { DOCUMENT_VISIBILITY_CHANGE } from "redux-saga-document-visibility";

function* cancellableSync() {
  while (true) {
    const { payload } = yield take(DOCUMENT_VISIBILITY_CHANGE);
    console.log(payload.visibility);
    if (payload.visibility) {
      // 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.

import { createVisibleChangeSaga } from "redux-saga-document-visibility"; // CommonJS
import { createVisibleChangeSaga } from "redux-saga-document-visibility/esm"; // ESM