react-update-notification

react-update-notification ·

A small cli tool & React hook to check when your app is updated and show a notification.

Installation

yarn add react-update-notification

or

npm i -S react-update-notification

Usage

This tool works in two steps:

• Injecting current version number into window object in index.html and creating version.json file to check for a new version.
• 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"
  }
}

generate-version accepts several types of strategies to differentiate versions and trigger the update notification:

• latest-commit uses current commit hash.
• package uses package.json version field.

2. Using a React hook

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>
  );
};

TODO

• Define behavior when version file is broken / does not exist
• Custom strategies for version generation (package.json, commit id)
• Custom paths to generate-version
• Hook options (checking update using interval)
• Proper documentation, tests and build