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 — 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; loe seda, kui vajad täpset prop-nime, tüüpi või vaikeväärtust.

Seadistus

Kaks osa, ja ainult kaks:

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

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:

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.

Vaikeseaded — pluss richColors Toasteril värvilise success/error jaoks, invert teema vastu pööramiseks.
Reasisised kohandused — toastOptions={{ style: {…} }} Toasteril kõigi toast'ide jaoks või style iga toast() kutse kohta.
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.
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.