Hoppa till huvudinnehåll

Toast

Notifiering, notiser
Storybook
React Aria

Komponent för att visa ett kort, tillfälligt meddelanden om åtgärder, fel eller andra händelser i en applikation.

Installation​

npm install @midas-ds/components
import { ToastProvider } from '@midas-ds/components'

Varianter​

Toast har fyra olika varianter som matchar InfoBanner: success, info, important och warning.

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/components'

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

Toastkö​

Om det triggas flera Toast sätts de i en kö för att visas i turordning. Maximala antalet som visas samtidigt är 5. Varje gång en toast läggs till i kön går det att bestämma livslängd och prioritering. Prioritet kan sättas till 1, 2 eller 3. warning har dock alltid högsta prioritet och kommer därmed först i kön.

.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​