Sonner

Sonner is a React-based notification library designed for rendering transient, stackable feedback messages within web applications. It functions as a frontend system for managing and displaying time-limited alerts that inform users of system events or state changes during an active session.

The library utilizes a centralized state machine to manage the lifecycle of each notification, ensuring consistent visibility and removal. It coordinates these elements through an event-driven message bus and renders them into a detached container outside the main application hierarchy to maintain global stacking and positioning.

The system handles layout calculations and animations by dynamically updating browser properties, allowing for real-time adjustments based on the number and size of active notifications. It is built as a reusable component library for integration into React-based user interfaces.

Features

Toast Notifications - Provides a React-based library for displaying stackable, transient toast notifications.
Notification Systems - Functions as a frontend notification system for managing and rendering transient feedback messages.
Alerts & Notifications - Displays transient, time-limited alerts and feedback messages within the user interface.
React Components - Provides a reusable React component library for consistent UI feedback and interaction.
Feedback and Overlay Components - Implements a feedback component for showing transient status updates and alerts during user sessions.
Stacking Calculators - Calculates real-time stacking offsets and positioning for transient notification elements.
Lifecycle State Management - Manages the lifecycle of transient notifications through a centralized state machine tracking visibility and timers.

स्टार हिस्ट्री

emilkowalskisonner

Name: emilkowalski/sonner
Author: emilkowalski

View on GitHub

12,487 स्टार्स436 फोर्क्सTypeScriptMIT13 व्यूज़sonner.emilkowal.ski

Sonner

Features

Toast Notifications - Provides a React-based library for displaying stackable, transient toast notifications.
Notification Systems - Functions as a frontend notification system for managing and rendering transient feedback messages.
Alerts & Notifications - Displays transient, time-limited alerts and feedback messages within the user interface.
React Components - Provides a reusable React component library for consistent UI feedback and interaction.
Feedback and Overlay Components - Implements a feedback component for showing transient status updates and alerts during user sessions.
Stacking Calculators - Calculates real-time stacking offsets and positioning for transient notification elements.
Lifecycle State Management - Manages the lifecycle of transient notifications through a centralized state machine tracking visibility and timers.

Sonner के ओपन-सोर्स विकल्प

समान ओपन-सोर्स प्रोजेक्ट्स, जो Sonner के साथ साझा की गई सुविधाओं के आधार पर रैंक किए गए हैं।

gluestack/gluestack-ui
gluestack/gluestack-ui
4,931GitHub पर देखें
gluestack-ui is a cross-platform React component library built with Tailwind CSS. It provides over 30 pre-built, accessible components that can be installed by copying their source files directly into a project, giving developers full control over customization without external runtime dependencies. Every component implements WAI-ARIA patterns, keyboard navigation, and screen reader support out of the box. A key differentiator is the copy-paste architecture: rather than a traditional package dependency, component source code is placed in the project, allowing direct editing and eliminating ve
TypeScriptaccessibilitycomponent-librarycustomizable-components
GitHub पर देखें4,931
fkhadra/react-toastify
fkhadra/react-toastify
13,431GitHub पर देखें
react-toastify is a React toast notification library used to display temporary, animated alert messages. It functions as an animated notification framework and queue manager that coordinates the entry and exit transitions of on-screen alerts. The library features an imperative dispatch system that triggers notifications without requiring manual state management. It provides a customizable alert UI component that supports custom content, dark mode themes, and right-to-left layouts. The framework covers notification lifecycle management and behavior configuration, including the ability to limi
TypeScriptjavascriptnotificationreact
GitHub पर देखें13,431
jossmac/react-toast-notifications
jossmac/react-toast-notifications
2,163GitHub पर देखें
This library provides a centralized system for managing and rendering transient alert messages within React applications. It functions as a frontend notification manager, using a provider-based architecture to track, update, and remove status alerts through a standardized reactive interface. The system distinguishes itself by allowing developers to replace default alert designs with custom components, ensuring that feedback elements align with specific application branding and design systems. It utilizes portal-based rendering to mount notifications outside the main component hierarchy, ensur
JavaScriptnotificationsreactsnackbar
GitHub पर देखें2,163
timolins/react-hot-toast
timolins/react-hot-toast
10,848GitHub पर देखें
This project is a notification library for web applications that provides a system for displaying transient, non-blocking toast messages. It functions as a UI component library that manages the lifecycle, visibility, and positioning of alerts, allowing developers to provide immediate feedback to users through success, error, or loading states. The library distinguishes itself through a headless logic architecture that decouples state management from the visual layer, enabling full control over the appearance and structure of notifications. It supports custom component rendering, allowing deve
TypeScriptnotificationsreactsnackbar
GitHub पर देखें10,848

Sonner के सभी 30 विकल्प देखें

अक्सर पूछे जाने वाले प्रश्न

emilkowalski/sonner क्या करता है?

emilkowalski/sonner की मुख्य विशेषताएं क्या हैं?

emilkowalski/sonner की मुख्य विशेषताएं हैं: Toast Notifications, Notification Systems, Alerts & Notifications, React Components, Feedback and Overlay Components, Stacking Calculators, Lifecycle State Management।

emilkowalski/sonner के कुछ ओपन-सोर्स विकल्प क्या हैं?

emilkowalski/sonner के ओपन-सोर्स विकल्पों में शामिल हैं: gluestack/gluestack-ui — gluestack-ui is a cross-platform React component library built with Tailwind CSS. It provides over 30 pre-built,… fkhadra/react-toastify — react-toastify is a React toast notification library used to display temporary, animated alert messages. It functions… jossmac/react-toast-notifications — This library provides a centralized system for managing and rendering transient alert messages within React… timolins/react-hot-toast — This project is a notification library for web applications that provides a system for displaying transient,… cosscom/coss — Coss is an accessible UI component library and design system framework used to build web interfaces. It provides a… ionicfirebaseapp/getwidget — Getwidget is a comprehensive Flutter UI component library and design system providing over 1,000 pre-built widgets for…