{"_id":"@astrapi69/pwa-update-react","_rev":"3-41850de057982bede6669720779f896f","name":"@astrapi69/pwa-update-react","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@astrapi69/pwa-update-react","version":"0.1.0","keywords":["react","pwa","service-worker","update","banner","version"],"author":{"name":"Asterios Raptis"},"license":"MIT","_id":"@astrapi69/pwa-update-react@0.1.0","maintainers":[{"name":"astrapi69","email":"asterios.raptis@gmx.net"}],"homepage":"https://github.com/astrapi69/pwa-update-kit#readme","bugs":{"url":"https://github.com/astrapi69/pwa-update-kit/issues"},"dist":{"shasum":"165f871636b02ee9f6feddd555086795333759b4","tarball":"https://registry.npmjs.org/@astrapi69/pwa-update-react/-/pwa-update-react-0.1.0.tgz","fileCount":8,"integrity":"sha512-MQNFmMzXQyPFAVpwoVp7E3yPGmvx+IDCrCei2BNYd0cfRnjjK2q65GQP3Q6eosE3zlBXdVYN707XY0HhVAtF4Q==","signatures":[{"sig":"MEYCIQDKx6WE6j/N5UkDiu6XlQQjh2nOWZjwbn7B3GaceUZH7AIhAIFMJWcE7CG4RNiDzizE+Yfmp3xp2p5xgabssjtWgsLp","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":152937},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=20"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}}},"gitHead":"0325af9d8eba62d04c7fa0b4e30fd1ff3c49167a","scripts":{"build":"tsup"},"_npmUser":{"name":"astrapi69","email":"asterios.raptis@gmx.net"},"repository":{"url":"git+https://github.com/astrapi69/pwa-update-kit.git","type":"git","directory":"packages/react"},"_npmVersion":"11.16.0","description":"React UI for PWA update detection: update banner, check-for-updates control, version card and deploy-safe lazy routes — messages-, slot- and store-injectable","directories":{},"sideEffects":false,"_nodeVersion":"24.15.0","dependencies":{"@astrapi69/pwa-update":"0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18 || ^19"},"_npmOperationalInternal":{"tmp":"tmp/pwa-update-react_0.1.0_1784560853996_0.343333787065105","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@astrapi69/pwa-update-react","version":"0.1.1","keywords":["react","pwa","service-worker","update","banner","version"],"author":{"name":"Asterios Raptis"},"license":"MIT","_id":"@astrapi69/pwa-update-react@0.1.1","maintainers":[{"name":"astrapi69","email":"asterios.raptis@gmx.net"}],"homepage":"https://github.com/astrapi69/pwa-update-kit#readme","bugs":{"url":"https://github.com/astrapi69/pwa-update-kit/issues"},"dist":{"shasum":"bfc7089154e1dbeaffe83eaf107441d2dce42354","tarball":"https://registry.npmjs.org/@astrapi69/pwa-update-react/-/pwa-update-react-0.1.1.tgz","fileCount":8,"integrity":"sha512-jQFebiLm+YE3l9Nx3uaUihV488E5PJCHpJHqicYYyESYrCCsTALQBhAK7lBeiHTRo9Qx/ui0EqJEEMxTXroQog==","signatures":[{"sig":"MEUCIQCGdEZWo5aAJfLgqzTzAckcPcm40l7oM+zIsPmwCj1OegIgAp45flHNXn5cJHEh8Ibk4hjxTasgXR8di7GS76aTCqY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":155811},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=20"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}}},"gitHead":"18b321b36d3b5a00b3a22a0881ecc4788f9d1981","scripts":{"build":"tsup"},"_npmUser":{"name":"astrapi69","email":"asterios.raptis@gmx.net"},"repository":{"url":"git+https://github.com/astrapi69/pwa-update-kit.git","type":"git","directory":"packages/react"},"_npmVersion":"11.16.0","description":"React UI for PWA update detection: update banner, check-for-updates control, version card and deploy-safe lazy routes — messages-, slot- and store-injectable","directories":{},"sideEffects":false,"_nodeVersion":"24.15.0","dependencies":{"@astrapi69/pwa-update":"0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18 || ^19"},"_npmOperationalInternal":{"tmp":"tmp/pwa-update-react_0.1.1_1784561778029_0.5966894354807932","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@astrapi69/pwa-update-react","version":"0.2.0","description":"React UI for PWA update detection: update banner, check-for-updates control, version card and deploy-safe lazy routes — messages-, slot- and store-injectable","license":"MIT","author":{"name":"Asterios Raptis"},"repository":{"type":"git","url":"git+https://github.com/astrapi69/pwa-update-kit.git","directory":"packages/react"},"keywords":["react","pwa","service-worker","update","banner","version"],"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}}},"sideEffects":false,"scripts":{"build":"tsup"},"dependencies":{"@astrapi69/pwa-update":"^0.2.0"},"peerDependencies":{"react":"^18 || ^19"},"publishConfig":{"access":"public"},"engines":{"node":">=20"},"gitHead":"62dbd99417758804d00fec5871bfe57ce9e5b435","_id":"@astrapi69/pwa-update-react@0.2.0","bugs":{"url":"https://github.com/astrapi69/pwa-update-kit/issues"},"homepage":"https://github.com/astrapi69/pwa-update-kit#readme","_nodeVersion":"24.15.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-Gkmvy/yDwoE/VkNxNQ8NHaDOgYdWd5TMhIHOMBimHNQ+I1+wSfogULbm00ruTDxEDh8oAPUvoUa8Bw+jsMS6Jw==","shasum":"8e455c7cf80ae3fa2764fae9f4b002d4cc4cff89","tarball":"https://registry.npmjs.org/@astrapi69/pwa-update-react/-/pwa-update-react-0.2.0.tgz","fileCount":8,"unpackedSize":157286,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDYnmCGJFk4wxsWk3HjMGJJpvmPRw0NIFbjea2B7zEhVwIgXsmT3WJ7LJHW22p7g5H0TjdL8YxRwBuabbSLKsr5azU="}]},"_npmUser":{"name":"astrapi69","email":"asterios.raptis@gmx.net"},"directories":{},"maintainers":[{"name":"astrapi69","email":"asterios.raptis@gmx.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/pwa-update-react_0.2.0_1784641082087_0.9491378842529501"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-20T15:20:53.841Z","modified":"2026-07-21T13:38:02.384Z","0.1.0":"2026-07-20T15:20:54.177Z","0.1.1":"2026-07-20T15:36:18.185Z","0.2.0":"2026-07-21T13:38:02.222Z"},"bugs":{"url":"https://github.com/astrapi69/pwa-update-kit/issues"},"author":{"name":"Asterios Raptis"},"license":"MIT","homepage":"https://github.com/astrapi69/pwa-update-kit#readme","keywords":["react","pwa","service-worker","update","banner","version"],"repository":{"type":"git","url":"git+https://github.com/astrapi69/pwa-update-kit.git","directory":"packages/react"},"description":"React UI for PWA update detection: update banner, check-for-updates control, version card and deploy-safe lazy routes — messages-, slot- and store-injectable","maintainers":[{"name":"astrapi69","email":"asterios.raptis@gmx.net"}],"readme":"# @astrapi69/pwa-update-react\n\nReact UI for [`@astrapi69/pwa-update`](https://www.npmjs.com/package/@astrapi69/pwa-update):\na discreet update banner, an active \"check for updates\" control, a version\ncard, and deploy-safe lazy routes.\n\n```bash\nnpm install @astrapi69/pwa-update @astrapi69/pwa-update-react\n```\n\n## Quick start\n\n```tsx\nimport { createUpdateStore } from \"@astrapi69/pwa-update\";\nimport { PwaUpdateProvider, UpdateBanner } from \"@astrapi69/pwa-update-react\";\n\nconst store = createUpdateStore({\n    build: { version: __APP_VERSION__, buildHash: __BUILD_HASH__ },\n    manifestUrl: `${import.meta.env.BASE_URL}version.json`,\n    storageNamespace: \"my-app\",\n});\n\nexport function App() {\n    return (\n        <PwaUpdateProvider store={store}>\n            <Routes />\n            <UpdateBanner />\n        </PwaUpdateProvider>\n    );\n}\n```\n\nBoth surfaces read the SAME store, so a passively detected update shows up on\nthe settings control without a press, and applying at either place clears\nboth.\n\n`useAppUpdate` (and therefore `UpdateBanner`) wires the store's proactive\npolling automatically — configure it on the store via `polling`, and the hook\nstarts and stops it with the component lifecycle.\n\n## Components\n\n| Export | What it is |\n|---|---|\n| `UpdateBanner` | Connected banner — mount once at the app root. Renders nothing until an update is detected. |\n| `UpdatePrompt` | The presentational bar behind it. All copy and callbacks are props; use it directly for a custom flow. |\n| `UpdateCheckControl` | Active \"check for updates\" button, result line and last-checked footer. |\n| `VersionCard` | Version / build hash (optionally linked to the commit) / build date. Takes an `UpdateCheckControl` as a child. |\n| `lazyWithReload` | `React.lazy` that survives a stale deploy — one automatic reload on a chunk-load failure, loop-guarded. |\n| `useAppUpdate` | The banner's state, if you render your own. |\n| `useUpdateState` | Raw store snapshot via `useSyncExternalStore`. |\n| `useOnlineStatus` | Coarse `navigator.onLine` signal. |\n\n## i18n\n\nAll strings live in one `messages` object with English defaults. Override\nonly what you need:\n\n```tsx\n<PwaUpdateProvider store={store} messages={{ apply: \"Aktualisieren\" }} locale=\"de\" />\n```\n\nIf your app already has an i18n system, build the object in one line —\n`MESSAGE_KEYS` documents the keys so they can live in your catalogs:\n\n```tsx\nimport { messagesFromTranslate } from \"@astrapi69/pwa-update-react\";\n\n<PwaUpdateProvider store={store} messages={messagesFromTranslate(t)} locale={lang} />\n```\n\n## Styling\n\nComponents carry token-backed utility classes **and** a stable semantic class\nname on every element (`pwa-update-prompt`, `pwa-update-prompt-apply`,\n`pwa-update-check`, `pwa-version-card`, …). Two ways to fit your design:\n\n1. **Tailwind + design tokens** — define `--bg-surface`, `--fg-primary`,\n   `--accent`, `--border` etc. and the components inherit your theme.\n2. **Plain CSS** — target the semantic class names and ignore the utilities.\n\nButtons additionally go through a slot, so a design-system primitive drops in:\n\n```tsx\n<PwaUpdateProvider store={store} Button={MyButton} />\n```\n\nThe slot Button receives `variant` (`default` | `outline` | `ghost`) and\n`size` (`default` | `sm`); the default renders a plain `<button>` carrying\nthem as `data-variant` / `data-size`.\n\n## The iOS restart hint\n\nOn an installed iOS PWA, `skipWaiting()` + reload often does not activate the\nnew worker — only a full app close-and-reopen does. `UpdateBanner` shows the\n`fullRestartHint` message in exactly that situation, driven by the store's\n`needsFullRestart` state rather than a host-side check, so it cannot be\nforgotten. Background: the \"Platform quirks this package encodes\" section of\nthe core package README.\n\n## License\n\nMIT © Asterios Raptis\n","readmeFilename":"README.md"}