react-clear-cache

react-clear-cache

A component to manage application updates.

Demo

• Fetched on window focus
• Stop fetching on window blur

Demo

See demo

Install

$ npm install --save react-clear-cache

Add script in package.json

This will generate meta.json file. This will have the version key with the latest build.

{
  "prebuild": "npm run generate-build-meta",
  "generate-build-meta": "./node_modules/react-clear-cache/bin/cli.js"
}

Usage

Using Context API:

import * as React from 'react';

import { ClearCacheProvider, useClearCacheCtx } from 'react-clear-cache';

const App: React.FC<{}> = () => {
  const { isLatestVersion, emptyCacheStorage } = useClearCacheCtx();
  return (
    <div>
      {!isLatestVersion && (
        <p>
          <a
            href="#"
            onClick={(e) => {
              e.preventDefault();
              emptyCacheStorage();
            }}
          >
            Update version
          </a>
        </p>
      )}
    </div>
  );
};

ReactDOM.render(
  <ClearCacheProvider duration={5000}>
    <App />
  </ClearCacheProvider>,
  document.getElementById('root')
);

Using render props:

import * as React from 'react';

import ClearCache from 'react-clear-cache';

const App: React.FC<{}> = () => {
  return (
    <div>
      <ClearCache>
        {({ isLatestVersion, emptyCacheStorage }) => (
          <div>
            {!isLatestVersion && (
              <p>
                <a
                  href="#"
                  onClick={(e) => {
                    e.preventDefault();
                    emptyCacheStorage();
                  }}
                >
                  Update version
                </a>
              </p>
            )}
          </div>
        )}
      </ClearCache>
    </div>
  );
};

export default App;

Using hooks:

import * as React from 'react';

import { useClearCache } from 'react-clear-cache';

const App: React.FC<{}> = () => {
  const { isLatestVersion, emptyCacheStorage } = useClearCache();
  return (
    <div>
      {!isLatestVersion && (
        <p>
          <a
            href="#"
            onClick={(e) => {
              e.preventDefault();
              emptyCacheStorage();
            }}
          >
            Update version
          </a>
        </p>
      )}
    </div>
  );
};

export default App;

Props

duration: number

You can set the duration when to fetch for new updates.

auto: boolean

Set to true to auto-reload the page whenever an update is available.

Render props

loading: boolean

A boolean that indicates whether the request is in flight

isLatestVersion: boolean

A boolean that indicates if the user has the latest version.

emptyCacheStorage: () => void

This function empty the CacheStorage and reloads the page.

Contributors

• geminstall23

License

MIT © geminstall23

Development

• In package.json, set main to src/index.js.

• Run npm start in root directory. It will build and watch if there are changes made.

• cd example and run npm start. It will run the demo application.

Note

If you are done making changes, reset main to dist/index.js in package.json.