react-version-check v1.0.8

keep your code updated to its latest version!

Sometimes browsers cache websites, thus presenting an old version of them.
The <VersionCheck> component checks if your version is the latest, and if not, it forces a hard refresh to fix this.
No more backward compatibility headaches!

usage example

import { VersionCheck } from 'react-version-check';
import packageJson from "../package.json";

export function App() {
  return (
    <>
      <VersionCheck currentVersion={packageJson.version} />
      <div>your website</div>
    </>
  );
}

helper script

To make this work, you will need from time to time (and especially after big changes) to update the version number inside your package.json --- and you will need a script to run on each build to copy this number from package.json to public/meta.json

the script:

In the root of your project create a file named update-version.js with this content:

import fs from "fs";
import packageJson from "./package.json" assert { type: "json" };
const jsonData = JSON.stringify({ version: packageJson.version });

fs.writeFile("./public/meta.json", jsonData, "utf8", function (err) {
  if (err) return console.error("An error occurred while writing JSON Object to meta.json:", err);
  console.log("meta.json file has been saved with latest version number");
});

running on each build/start:

I recommend running this script on each build/start.
In the package.json file, inside the scripts object add those line:

"scripts": {
  "update-version": "node update-version",
  "start": "npm run update-version && npm start", // you can replace ["npm start"] with whatever start-command you had before
  "prebuild": "npm run update-version"
},

To test if this is working, go to package.json and update the version number.
then, go to your terminal and run:

npm run update-version

Now check if the file public/meta.json has been updated with this version number.

component props

The configurable props of <VersionCheck> component: