Sonner: The Must-Have Toast Library for React

•

Si tu n'ajoutes pas cette librairie de Toast dans ton application React... supprime le dépôt GitHub et jette ton ordi par la fenêtre 🪟 Plus sérieusement... Je vais vraiment te présenter une pépite. ✨

Sans plus de suspense, cette librairie c'est Sonner et si elle est géniale c'est pas pour rien. Je dis pas ça juste pour la hype, mais elle se démarque par 2 qualités assez dingues. 🚀

1️⃣ API Simple Un des problèmes de beaucoup de librairies, c'est qu'elles sont liées à React. 🔄 C'est-à-dire que pour les utiliser, tu dois : 1. Importer 2. Utiliser le hook (const toast = useToast) 🎣 3. Utiliser la méthode (toast.success)

Alors qu'avec sonner tu supprimes une des étapes, la deuxième. Car son fonctionnement est "extrait" de React. Tu fais juste : 1️⃣ Importer 2️⃣ Utiliser le hook (const toast = useToast) 3️⃣ Utiliser la méthode (toast.success)

Quand tu utilises 1000x les toasts dans ton application, je peux te promettre que cette petite différence te fait gagner beaucoup de temps. ✨

2️⃣ UX de dingue! 🚀 Le deuxième avantage de Sonner, c'est son UX juste fantastique. Voici en gros les fonctionnalités UX de fou:

1️⃣ Mobile friendly UX Quand tu es sur mobile, il suffit de "slide" le toast pour qu'il dégage. 📲 2️⃣ Stack Quand tu as plusieurs toast, ils vont se stack. Quand tu hover, ils vont se dé-stack, ce qui va te permettre de tous les voir. 📚

3. Desktop friendly UX 🖱️ Avec la souris, tu peux aussi faire glisser les toasts pour les faire disparaître.

Cette librairie, c'est une masterclass. Car elle t'offre aussi de la personnalisation et de nombreux éléments essentiels. Juste teste-la, et tu verras.

Cette librairie fait intégralement partie de ma future boilerplate NowTS que tu peux retrouver ici nowts.app Tu peux aussi retrouver ma vidéo qui explique encore mieux : youtu.be/K1lJyYLjZks