Hoppa till huvudinnehåll

Toast

Notifiering, notiser
Version: 1.0.3
Versionslogg
Storybook
Referens

Introduktion​

En notifiering är ett kort, tillfälligt meddelanden om åtgärder, fel eller andra händelser i en applikation. De är utformade för att vara diskreta och inte kräva att användaren stänger dem omedelbart.

Notifieringarna sätts i en kö för att visas i turordning. Maximala antalet är för närvarande satt till 5. En notifiering kan stängas via kryssrutan eller via en timeout som sätts via {timeout: ms}. Det går även att sätta en prioritet på meddelanden relativt andra i kön. Notifieringar renderas i en<ToastRegion> som i nuvarande implementation återfinns i skärmens nedre högra hörn.

Installation​

npm install @midas-ds/toast

Varianter​

En toast har fyra olika varianter, success, info, warning, important. Använd lämplig typ beroende på vilken information som ska visas.

Lokal implementation​

Använd toastProvider för att sätta en kö av Toasts på valfritt ställe i en app. Om det inte går att wrappa hela appen i en kö med en provider, använd den globala varianten.

import { ToastProvider, MidasToastState } from '@midas-ds/toast';

<ToastProvider>
  {(state: MidasToastState) => (
    <Button
      onPress={() => state.add({message: "Success", type: 'success'}, {timeout: 5000 })}
    >
      Show toast
    </Button>
  )}
</ToastProvider>;

Global implementation​

Välj en global kö för toasts om det passar ditt användsningsscenario bättre. Lägg en <GlobalToastRegion> någonstans i appen och lägg nya toasts i kön enligt:

import { GlobalToastRegion, toastQueue } from '@midas-ds/toast';

<GlobalToastRegion />
//...
<Button onPress={
  () => toastQueue.add({type: 'success', message: 'Toast is done'})
}>Show toast</Button>

Riktlinjer​

Timeout ska av tillgänglighetsskäl vara minst 5000ms:

{timeout: 5000ms}

Beroenden​

  • @midas-ds/button@1.1.1
  • react@^18.3.1
  • @react-aria/toast@^3.0.0-beta.12
  • @react-stately/toast@3.0.0-beta.6
  • react-dom@18.3.1
  • lucide-react@^0.453.0