Composants
Force update screen
The blocking screen of a version that can no longer run: the mark, one sentence, one button to the store.
import { ForceUpdateScreen } from "@krizaka/ui/force-update-screen";Web et mobile — le même composant pour React et React Native. Déprécié : conservé pour les apps qui l'utilisent encore, retiré à sa prochaine version majeure.
Pourquoi il est là. The web entry has no user (ADR-006 audit, 2026-10-25). The native `ForceUpdateScreen`, used by mobile apps, stays.
DépréciéDepuis 3.55.0, retiré en 4.0.0. The web entry has no user (ADR-006 audit, 2026-10-25). The native `ForceUpdateScreen`, used by mobile apps, stays.
Quand l’utiliser
- When the backend says
updateMode: forceor answers426 Upgrade Required. - In place of the whole app: nothing behind it must be reachable.
Quand ne pas l’utiliser
- When the installed version still works: invite, do not block.À la place : Update prompt
- When the service is down on purpose.À la place : Maintenance screen
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { ForceUpdateScreen } from "@krizaka/ui/force-update-screen";Exemples
Default
The title, the sentence, the versions and the store button.
Props
The forced update: one thing to do, and the way to do it.
| Prop | Type | Défaut | Description |
|---|---|---|---|
onUpdaterequis | () => void | — | Opens the store page. |
titlerequis | ReactNode | — | The headline (“Update to keep going”). |
updateLabelrequis | string | — | The button that updates (“Update the app”). |
mark | ReactNode | — | The product's mark or mascot (decorative). |
message | ReactNode | — | Why, in a sentence — the backend's localized message. |
onRetry | (() => void) | — | Checks the backend again. |
retryLabel | string | — | A secondary way (“Check again”) once the update is installed — optional. |
versionLabel | ReactNode | — | The versions, in words and mono (“You have 1.1.0 · 1.2.0 or later is required”). |
Accessibilité
- A
mainwith the title as itsh1; the update button takes focus at once. - The mark is decorative.
Bonnes pratiques
- Say why in one sentence and give one way out: the store button.
- Show the installed and the required version, in mono.
- Offer “Check again” for the person who just updated from the store.
Composants liés
Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub