rc-notification

rc-notification is a low-level React library for rendering transient notices — toasts, snackbars, and message banners. It exposes a hook-based API that returns an imperative API plus a container element, letting you open, update, and close notifications from anywhere in your component tree while the library manages stacking, timed auto-dismissal, and enter/exit animations.

Designed as a headless primitive rather than a styled widget, it handles the hard parts of notification UX — positioning, stack management, progress-based auto-close, and accessibility — and leaves visual styling to you. It is the engine behind Ant Design’s notification and message components.

What You Get

• A useNotification hook returning an imperative open/close API plus a container element to render
• Automatic stacking and positioning of multiple concurrent notices
• Timed auto-dismissal with a progress indicator and pause-on-hover behaviour
• Enter and exit animations via @rc-component/motion for smooth transitions
• Headless, unstyled primitives with accessibility and closable controls built in

Common Use Cases

• Showing success, error, and info toast messages after user actions
• Rendering stacked notifications that auto-dismiss after a timeout
• Building a custom design-system notification component on top of a headless engine
• Displaying transient banners that can be programmatically updated or closed

Under The Hood

Architecture - The core is hook-driven: src/hooks/useNotification.tsx returns an API and a holder, backed by Notifications.tsx which owns the array of open notices and renders a NotificationProvider. Stacking is handled by useStack.ts, per-notice lifecycle and auto-close timing by useNoticeTimer.ts (with Progress.tsx driving the countdown bar), positioning by the useListPosition hooks, and closable behaviour by useClosable.ts. NotificationList renders the stacked notices into a container.

Tech Stack - Written in TypeScript and published as CommonJS (lib) and ES modules. Runtime dependencies are minimal and modern: @rc-component/motion for animations, @rc-component/util for shared React helpers, and clsx for class composition. Styling hooks are provided via Less. It targets React with hooks throughout.

Code Quality - The repo is actively maintained (about 7 commits/month, 62 releases) with a Jest/Testing-Library suite under tests/ covering hooks, stacking, and the top-level API, tracked on Codecov and GitHub Actions CI. The codebase is cleanly decomposed into single-purpose hooks, making behaviour easy to follow and test.

API Design - The hook-based design is the standout: calling useNotification() returns [api, holder], where you render holder once and call api.open({…}) imperatively from anywhere. This cleanly bridges React’s declarative model with the inherently imperative act of firing a toast, and keeping the primitive unstyled makes it a flexible foundation for any design system.