Skip to content

DevJett/react-clear-cache

 
 

Repository files navigation

react-clear-cache

A component to manage application updates.

NPM JavaScript Style Guide

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

  1. noahjohn9259

License

MIT © noahjohn9259

Development

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

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

  3. 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.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 50.1%
  • JavaScript 36.5%
  • CSS 6.9%
  • HTML 6.5%