Hoppa till huvudinnehåll

Toast

Notifiering, notiser
Version: 1.0.5
Versionslogg
Storybook
Referens

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. Det går även att sätta en prioritet på meddelanden relativt andra i kön. Notifieringar renderas i en<ToastRegion>.

Installation och användning​

npm install @midas-ds/toast
import { ToastProvider } from '@midas-ds/toast'
;<ToastProvider>
  {state => (
    <Button onPress={() => state.add({ message: 'Allt funkar som det ska!', type: 'success' }, { timeout: 5000 })}>
      Tryck här för en notifiering
    </Button>
  )}
</ToastProvider>

Varianter​

En toast har fyra olika varianter, success, info, warning, important. Använd lämplig typ beroende på vilken information som ska visas. Här har även varningsnotisen högsta prioritet vilket gör att den alltid går före i kön.

Implementationer​

Lokalt​

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.

<ToastProvider>
  {state => (
    <Button onPress={() => state.add({ message: 'Allt funkar som det ska!', type: 'success' }, { timeout: 5000 })}>
      Tryck här för en notifiering
    </Button>
  )}
</ToastProvider>

Globalt​

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'})
}>Visa notis</Button>

Notiskön​

Varje gång en toast läggs till i kön går det att bestämma livslängs och prioritering för notisen. Prioritet kan sättas till 1, 2 eller 3 och notiserna kommer gå före i kön beroende på detta.

.add(
  {...},
  { priority: 1 }
)

Riktlinjer​

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

.add(
  {...},
  { timeout: 5000 }
)

API​

Toast​

NamnTypStandardBeskrivning
state *ToastState<T>-
toast *QueuedToast<T>-The toast object.

ToastRegion​

GlobalToastRegion​

ToastProvider​

Beroenden

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