Reddot UI Library

Docs
Sonner

Sonner

An opinionated toast component for React.

À propos

Sonner est créé et maintenu par emilkowalski_.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/sonner.json

Ajout du composant Toaster

Dans votre app/layout.tsx :

import { Toaster } from "@/components/ui/sonner"
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

Utilisation

Importez la fonction toast :

import { toast } from "sonner"

Toast basique :

toast("L'événement a été créé.")

Exemple avec description et action :

"use client"
 
import { toast } from "sonner"
import { Button } from "@/components/ui/button"
 
export function SonnerDemo() {
  return (
    <Button
      variant="outline"
      onClick={() =>
        toast("L'événement a été créé", {
          description: "Dimanche, 03 décembre 2023 à 09h00",
          action: {
            label: "Annuler",
            onClick: () => console.log("Annuler"),
          },
        })
      }
    >
      Afficher Toast
    </Button>
  )
}

Exemples

Types de toast

import { toast } from "sonner"
 
// Succès
toast.success("Email envoyé avec succès")
 
// Erreur
toast.error("Une erreur est survenue")
 
// Avertissement
toast.warning("Attention à cette action")
 
// Information
toast.info("Information importante")
 
// Toast de chargement
toast.loading("Chargement en cours...")
 
// Toast personnalisé
toast("Événement personnalisé", {
  description: "Ceci est une description personnalisée",
  duration: 4000,
})

Toast avec action

import { toast } from "sonner"
 
toast.success("Email envoyé", {
  description: "Votre message a été envoyé avec succès",
  action: {
    label: "Voir",
    onClick: () => console.log("Voir email")
  }
})

Toast avec promesse

import { toast } from "sonner"
 
const promise = () => new Promise((resolve) => 
  setTimeout(resolve, 2000)
)
 
toast.promise(promise, {
  loading: 'Chargement...',
  success: (data) => 'Opération réussie',
  error: 'Erreur lors de l\'opération',
})

API Reference

toast()

Fonction principale pour afficher des toasts.

toast(message, options)
ParamètreTypeDescription
messagestring | React.ReactNodeLe contenu du toast.
optionsToastOptionsOptions de configuration du toast.

ToastOptions

PropriétéTypeDefaultDescription
descriptionstring | React.ReactNode-Description supplémentaire du toast.
durationnumber4000Durée d'affichage en millisecondes.
action{ label: string; onClick: () => void }-Bouton d'action dans le toast.
cancel{ label: string; onClick: () => void }-Bouton d'annulation dans le toast.
idstring | number-ID unique du toast.
importantbooleanfalseSi true, le toast ne se fermera pas automatiquement.
onDismiss(t: Toast) => void-Callback appelé lors de la fermeture.
onAutoClose(t: Toast) => void-Callback appelé lors de la fermeture automatique.

Méthodes de toast

toast.success(message, options)
toast.error(message, options)
toast.warning(message, options)  
toast.info(message, options)
toast.loading(message, options)
toast.promise(promise, { loading, success, error })
toast.custom(jsx, options)
toast.dismiss(id?) // Ferme un ou tous les toasts

Toaster

Composant à placer dans votre layout.

PropTypeDefaultDescription
theme"light" | "dark" | "system""system"Thème des toasts.
positionToasterPosition"bottom-right"Position des toasts sur l'écran.
expandbooleanfalseSi tous les toasts doivent être développés.
richColorsbooleanfalseActive les couleurs riches pour les toasts.
closeButtonbooleanfalseAffiche un bouton de fermeture.
toastOptionsToastOptions-Options par défaut pour tous les toasts.

Références