Design

Confetti

@/components/ui/Confetti

Feiring av at noe FULLFØRES — et konfettiteppe fra toppen, i Frivios egne tokenfarger. Ingen ekstern avhengighet.

Når brukes den

  • Bruk for å feire at noe fullføres FØRSTE gang — ikke hver gang (onboarding komplett, første årsmøtepakke ferdig).

  • ConfettiOnComplete for automatisk engangsfeiring med en localStorage-gate; fireConfetti() for en direkte, imperativ avfyring (f.eks. fra en knapp).

  • Respekterer prefers-reduced-motion (viser ingenting) — ikke overstyr det.

  • Ikke bruk til vanlige lagringer eller hyppige hendelser — en feiring som skjer ofte er ikke en feiring.

Eksempler

Fyr konfetti (imperativt)

fireConfetti() kalles direkte — for en knapp eller annen brukerinitiert feiring.

<Button variant="accent" onClick={() => fireConfetti()}>Fullfør</Button>

ConfettiOnComplete (engangsvakt)

Fyrer automatisk når naar blir sann, men kun én gang per nettleser — styrt av minneNokkel i localStorage.

Fyrer kun FØRSTE gang «Merk som fullført» trykkes, til «Nullstill» er brukt.

<ConfettiOnComplete naar={sjekklisteErFullfort} minneNokkel="onboarding-fullfort" />

Props

Sveip tabellen for å se hele innholdet

Navn
Type
Default
Beskrivelse
fireConfetti()
() => void
Imperativ funksjon — fyrer konfetti med én gang. Ingen argumenter.
naar *
boolean
(ConfettiOnComplete) Fyrer når denne blir sann, forutsatt at minneNokkel ikke alt er satt.
minneNokkel *
string
(ConfettiOnComplete) localStorage-nøkkel som sikrer at feiringen kun skjer én gang.

Beslektede komponenter