react-update-notification v1.2.0

react-update-notification ·

A small CLI tool & React hook to check when your app has a new version and show a notification. Works great when you cannot or do not want to set up a service worker.

Installation

yarn add react-update-notification

or

npm i -S react-update-notification

Usage

This tool works in two steps:

1. Injecting current version number into window object in index.html and creating a version.json file to check for a new version.
2. Providing a React hook to build a custom update notification component.

1. Adding CLI command after build

In your package.json, add call to generate-version after the build is created.

{
  "scripts": {
    "build": "react-scripts build && generate-version -s package"
  }
}

CLI Options

2. Using a React hook

The useUpdateCheck hook returns:

• status string that can be 'checking', 'current' or 'available'.
• reloadPage helper function that reloads the page.
• checkUpdate function to manually trigger the update check.

It supports three check types:

• interval checks on component mount and then every set period defined by interval property (10 seconds by default).
• mount checks only on component mount.
• manual does not check at all. It is used to check with checkUpdate.

import React from 'react';
import { useUpdateCheck } from 'react-update-notification';

const NotificationContainer = () => {
  const { status, reloadPage } = useUpdateCheck({
    type: 'interval',
    interval: 10000,
  });

  if (status === 'checking' || status === 'current') {
    return null;
  }

  return (
    <div>
      <button type="button" onClick={reloadPage}>
        Refresh to update the app
      </button>
    </div>
  );
};