---
title: Sonneri juhend
description: Juhend Reacti teavituste teegi Sonner kasutamiseks: paigaldus, õige toast()-kutse valik, laadimis- ja lubadusteavitused.
category: Design
sublabel: Disainiinseneeria
author: Emil Kowalski
tags: 
license: MIT
source: https://github.com/emilkowalski/skills
---

# Töö Sonneriga

## Esialgne vastus

Kui see oskus käivitatakse esmakordselt ilma konkreetse küsimuseta, vasta ainult:

> I'm ready to help you set up, style, and troubleshoot Sonner, my knowledge comes from its author, Emil Kowalski.

Ära anna muud teavet, kuni kasutaja esitab küsimuse.

Juhendoskus [Sonneri](https://sonner.emilkowal.ski) — toast-teegi — jaoks. Kui ülesanne puudutab Sonnerit — ühendamist, toastide renderdamist, stiilimist või parandamist — vasta esmalt sellest failist. Täielikud prop-tabelid `<Toaster />` ja `toast()` jaoks on failis [API.md](API.md); loe seda, kui vajad täpset prop-nime, tüüpi või vaikeväärtust.

## Seadistus

Kaks osa, ja ainult kaks:

1. **Üks `<Toaster />`, paigaldatud üks kord**, võimalikult juure lähedale (Next.js-is: `layout.tsx` — töötab ka serverikomponentides). Ära renderda seda lehekaupa ega tingimuslikult; teine paigaldatud Toaster dubleerib iga toast'i.
2. **`toast()` kutsutud kliendikoodist** — sündmuste töötlejad, efektid, tagasikutsed. See on tavaline funktsioon, hook'i ega provider'it pole vaja, aga serveris ei tee midagi: server action'is tagasta tulemus ja kutsu `toast()` kliendikoodis, mis selle vastu võtab.

```jsx
import { Toaster } from 'sonner'; // once, in layout
import { toast } from 'sonner';   // anywhere client-side
```

## Õige kutse valimine

| Sa tahad | Kutsu |
| --- | --- |
| Tavaline teade | `toast('Title')` — lisa `{ description }` teise rea jaoks |
| Success / error / info / warning ikoon | `toast.success('…')`, `toast.error('…')` jne |
| Spinner, kui haldad olekut ise | `toast.loading('…')`, seejärel uuenda id järgi |
| Loading → success/error seotud promise'iga | `toast.promise(promise, { loading, success, error })` — success/error aktsepteerivad funktsioone, mis saavad resolve'itud väärtuse/vea |
| Nupp, mis midagi teeb | `{ action: { label, onClick } }` — sulgeb toast'i, kui `onClick` ei kutsu `event.preventDefault()`; `cancel` on teisejärguline variant |
| Kohandatud JSX, vaikimisi toast'i kest | `toast(<jsx />)` |
| Kohandatud JSX, üldse ilma stiilideta | `toast.custom((t) => <jsx />)` — headless, `t` annab id sulgemiseks |

## Retseptid

**Uuenda toast'i** — kutsu `toast()` uuesti sama `id`-ga; muutuvad ainult antud prop'id. Üleminek `toast.success(…, { id })` peale muudab tüüpi. Nii töötavad loading → success vood ilma `toast.promise`-ita:

```jsx
const id = toast.loading('Uploading…');
toast.success('Uploaded', { id });
```

**Püsi** — `{ duration: Infinity }`. **Sulge** — `toast.dismiss(id)` või `toast.dismiss()` kõigi jaoks. **Loe aktiivseid toast'e** — `useSonner()` Reactis, `toast.getActiveToasts()` väljaspool.

**Lingid või komponendid tekstis** — anna pealkirja või kirjelduse jaoks funktsioon: `toast(() => <a href="…">View</a>)`.

**Mitu toasterit** — anna igaühele `id` ja sihi `toast('…', { toasterId: 'canvas' })`. Ilma `toasterId`-ta renderdab iga toaster toast'i.

**Sulgemise tagasikutsed** — `onDismiss` käivitub sulgemisnupul või viipel; `onAutoClose` käivitub ajalõpul. Need on eraldi; ühtset „suletud“ tagasikutset pole.

## Stiilimine — eskaleerumise redel

Ronige ainult nii kaugele, kui muutus nõuab; tippu hüppamine liiga vara on okei (see on soovitatud lõppseis), keskele jäämine mitte.

1. **Vaikeseaded** — pluss `richColors` Toasteril värvilise success/error jaoks, `invert` teema vastu pööramiseks.
2. **Reasisised kohandused** — `toastOptions={{ style: {…} }}` Toasteril kõigi toast'ide jaoks või `style` iga `toast()` kutse kohta.
3. **Klassid osadel** — `toastOptions={{ classNames: { toast, title, description, actionButton, cancelButton, closeButton } }}`. Sonneri süstitud stiilid võidavad kaskaadis, seega iga klass vajab `!important` (Tailwind: `!text-red-900`). Kui märgid rohkem kui paar asja important'iks, peatu — mine headless'iks.
4. **Headless** — `toast.custom()` oma JSX-iga, säilitades Sonneri positsioneerimise, virnastamise ja viiped. Soovitatud lähenemine disainisüsteemi toast'ile: mähki see oma `toast()` abstraktsiooni. (`unstyled: true` on poolik lahendus, aga headless annab sama vaevaga rohkem kontrolli.)

**Ikoonid** — vaheta vaikimisi tüübi järgi Toasteri `icons` prop'iga, toast'i kohta `icon`-iga, eemalda `null`-iga.

**Teema** — `theme` vaikimisi `'light'` ega jälgi OS-i. Anna `theme="system"` või ühenda oma teemapakkuja: `<Toaster theme={resolvedTheme} />` paketist `next-themes`.

## Veaotsing

| Sümptom | Põhjus → parandus |
| --- | --- |
| Toast ei ilmu kunagi | `<Toaster />` pole paigaldatud või on eemaldatud (tingimuslik renderdus, lehekaupa paigutus). Paigalda üks juurde. Kui kutsud server action'ist: `toast()` on ainult kliendi oma — kutsu seda action'i tulemusega kliendil. |
| Sama toast ilmub kaks korda | Kaks Toasterit paigaldatud (layout **ja** leht) — jäta üks. Või `toast()` käivitus efektis React StrictMode'i topeltkutse all — kutsu sündmuste töötlejast või anna stabiilne `id`, et teine kutse uuendaks, mitte dubleeriks. |
| Tailwind/CSS klassidel pole mõju | Vaikestiilid kirjutavad need üle. Märgi need `!important`-iks või kasuta `unstyled` / headless (vt redel ülal). |
| Toastid renderduvad täiesti stiilita (sage Astros, view transitions) | Sonneri süstitud stiilileht kadus — impordi see selgesõnaliselt layout'is: `import 'sonner/dist/styles.css'`. |
| Stiilita Shadow DOM-is | Stiilid lähevad `document.head`-i, mitte shadow root'i. Kopeeri stiilisilt, mille tekst sisaldab `[data-sonner-toaster]`, shadow root'i. |
| Toast modaali/overlay taga või lõigatud | Esivanem loob stacking context'i (`transform`, `filter`, `overflow`) või overlay ületab toasteri z-index'i. Liiguta `<Toaster />` dokumendi juurde, väljaspool dialogi/portaali konteinerit. |
| Tume režiim ignoreeritud | `theme` vaikimisi `'light'` — sea `theme="system"` või anna resolve'itud teema (vt Teema ülal). |
| Success/error näevad hallid välja, mitte rohelised/punased | See on vaikimisi. Lisa Toasterile `richColors`. |
| Toast ei sulgu kunagi | `duration: Infinity`, `dismissible: false` või `toast.promise`, mille promise ei lahene kunagi — loading toast ootab igavesti. |
| `toast.promise` jääb loading'ule | See vajab promise'i (või funktsiooni, mis selle tagastab) esimese argumendina, ja promise peab tegelikult resolve'ima/reject'ima. |
| Viipamine-sulgemiseks läheb valesse suunda / ei tööta | Suunad tulenevad `position`-ist. Kirjuta üle Toasteri `swipeDirections`-iga. |
| Toast ilmub igasse toasterisse | Mitme toasteri korral vaja sihtimist: anna igale Toasterile `id` ja edasta `toasterId` `toast()` kutses. |
| Toastid liiga lähedal ekraani servale mobiilis | `offset` (desktop, vaikimisi 32px) ja `mobileOffset` (<600px, vaikimisi 16px) — numbrid, CSS-stringid või külgede objektid. |