Building a Toast Component
8 days ago
- #Developer Experience
- #UI Components
- #Toast Library
- Sonner is a toast library created in 2023, now widely used with over 7,000,000 weekly downloads.
- The library stands out due to its unique name, elegant design, and smooth stacking animations.
- Sonner's animations were initially implemented with CSS keyframes but later switched to CSS transitions for better interruptibility.
- The library features a swipe gesture for dismissing toasts, with momentum-based dismissal for a better user experience.
- Sonner includes a hover-to-expand feature, allowing users to see all toasts when hovering over the toast area.
- Developer experience is a priority, with a custom documentation site and easy-to-use API, including a promise API for handling toast states.
- Small details like pausing toast timers when the tab is inactive and maintaining correct hover states enhance the user experience.
- The library avoids using React's Context, opting for the Observer Pattern for state management.
- Sonner's success is attributed to its good developer experience and aesthetically pleasing design with nice defaults and animations.