{"id":11636,"library":"rc-notification","title":"React UI Notification Component","description":"The `rc-notification` package provides a foundational React UI component for displaying transient notifications such as toasts or alerts. It functions as a low-level, unstyled primitive, primarily serving as a building block for higher-level UI libraries, most notably Ant Design's notification system. The current stable version, 5.6.4, receives ongoing maintenance, with recent updates focused on bug fixes and performance enhancements within its 5.x series. It's crucial for developers to note that a separate, newer package, `@rc-component/notification`, has also been released. This newer package introduces additional features and potentially different APIs, marking a distinct evolution from `rc-notification`. This distinction is important for selecting the correct package based on project requirements and desired feature set, as the two packages have diverged in their development paths.","status":"active","version":"5.6.4","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/notification","tags":["javascript","react","react-component","react-notification","notification","typescript"],"install":[{"cmd":"npm install rc-notification","lang":"bash","label":"npm"},{"cmd":"yarn add rc-notification","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-notification","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for all React components.","package":"react","optional":false},{"reason":"Required as a peer dependency for rendering React components into the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"The primary default export is the `Notification` component/factory, often used via `Notification.newInstance`.","wrong":"import { Notification } from 'rc-notification';","symbol":"Notification","correct":"import Notification from 'rc-notification';"},{"note":"TypeScript type for the object returned by `Notification.newInstance` or `getInstance`.","symbol":"NotificationInstance","correct":"import type { NotificationInstance } from 'rc-notification';"},{"note":"TypeScript type for the configuration object passed to `notificationInstance.notice`.","symbol":"NoticeContent","correct":"import type { NoticeContent } from 'rc-notification';"},{"note":"For CommonJS environments, use `require` for the default export.","symbol":"Notification (CommonJS)","correct":"const Notification = require('rc-notification');"}],"quickstart":{"code":"import Notification from 'rc-notification';\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport type { NotificationInstance, NoticeContent } from 'rc-notification';\n\n// Assuming a root element exists in your HTML, e.g., <div id=\"root\"></div>\nconst rootElement = document.getElementById('root');\nif (!rootElement) throw new Error('Root element not found');\nconst root = ReactDOM.createRoot(rootElement);\n\nroot.render(\n  <React.StrictMode>\n    <button onClick={() => {\n      Notification.newInstance({\n        style: { top: 65, left: '50%', transform: 'translateX(-50%)' }, // Center horizontally\n        maxCount: 3,\n        getContainer: () => document.body, // Attach notification container to body\n      }, (notification: NotificationInstance) => {\n        const noticeProps: NoticeContent = {\n          content: 'Hello, this is a TypeScript notification!',\n          duration: 4.5,\n          closable: true,\n          onClose() {\n            console.log('TypeScript Notification closed!');\n          },\n        };\n        notification.notice(noticeProps);\n\n        notification.notice({\n          content: 'Another important message via TypeScript.',\n          duration: 3,\n          key: 'unique_message_key',\n        });\n      });\n    }} style={{ padding: '10px 20px', fontSize: '16px', cursor: 'pointer' }}>\n      Show Notifications\n    </button>\n  </React.StrictMode>\n);","lang":"typescript","description":"Demonstrates how to create a notification instance and display multiple notices using `rc-notification` in a React application with TypeScript, including basic styling and container setup."},"warnings":[{"fix":"Carefully review the documentation for both `rc-notification` and `@rc-component/notification`. For new projects, evaluate `@rc-component/notification`. For existing `rc-notification` projects, update with caution, checking for specific migration guides if available.","message":"A related, newer package, `@rc-component/notification`, has been introduced which serves as an evolution of this component. It features new APIs (e.g., `useNotification` hook), improved performance, and new features (like `duration: false`). While `rc-notification` is maintained, consider `@rc-component/notification` for new projects or if you need the latest features. Migrating existing `rc-notification` implementations to `@rc-component/notification` may involve breaking changes to imports and API calls.","severity":"breaking","affected_versions":">=1.0.0 for `@rc-component/notification` (relative to `rc-notification`'s lifecycle)"},{"fix":"Ensure you are using `rc-notification` version 5.6.3 or newer (e.g., 5.6.4) to benefit from the most stable and correct memory leak fixes.","message":"Versions 5.6.1 and 5.6.2 had an unstable fix for a memory leak. Version 5.6.1 introduced a fix that was then reverted in 5.6.2, indicating issues with its initial implementation. The leak was later re-fixed.","severity":"gotcha","affected_versions":"=5.6.1, =5.6.2"},{"fix":"You must supply your own CSS styles to `rc-notification` or use it as part of a higher-level UI library (like Ant Design) that provides styling. Use `prefixCls` and `style` props for customization.","message":"`rc-notification` is an unstyled, low-level component. By default, notifications will appear as plain text without any visual styling, background, or layout unless custom CSS is provided.","severity":"gotcha","affected_versions":"all"},{"fix":"Invoke `Notification.newInstance` once, ideally at your application's root or global setup, and reuse the returned `notification` instance for all subsequent `notice` calls throughout your application.","message":"Calling `Notification.newInstance` repeatedly will create multiple independent notification containers in the DOM, which is rarely the desired behavior. This method should typically be called only once during application initialization to create a singleton instance.","severity":"gotcha","affected_versions":"all"},{"fix":"Always specify a `duration` (in seconds) if you want notifications to auto-close. Set `duration: 0` for persistent notifications that require user interaction to dismiss.","message":"The `duration` property for `notification.notice` controls how long a notification stays visible. If not provided or set to `0`, notifications will not auto-close, requiring manual dismissal (if `closable` is true) or programmatic removal.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change your import statement from `import { Notification } from 'rc-notification';` to `import Notification from 'rc-notification';`.","cause":"`Notification` was imported incorrectly as a named export instead of a default export.","error":"TypeError: Notification.newInstance is not a function"},{"fix":"Consult the `NoticeContent` type definition from `rc-notification` and ensure all properties are correctly typed and present. You might need to import `NoticeContent` for type checking.","cause":"When using TypeScript, the object passed to `notificationInstance.notice` does not conform to the `NoticeContent` interface, or required properties are missing/incorrect.","error":"TS2345: Argument of type '{ /* ... */ }' is not assignable to parameter of type 'NoticeContent'."},{"fix":"Do not render `Notification.newInstance` directly. It's a factory method. Call it once to get an instance, then use the `notification.notice()` method. The notification container is injected directly into the DOM.","cause":"Attempting to render the result of `Notification.newInstance` directly within a React component's render method, which is not how it's designed to be used.","error":"Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."},{"fix":"Ensure that your `react` and `react-dom` versions meet the peer dependency requirements (e.g., `>=16.9.0`) and are consistent. Check for duplicate React installations in your `node_modules`.","cause":"This is a generic React error often indicating a version mismatch between `react` and `react-dom` peer dependencies or fundamental misuse of React APIs.","error":"Error: Minified React error #XXX; visit https://reactjs.org/docs/error-decoder.html?invariant=XXX for the full message or use the non-minified dev environment for full errors."}],"ecosystem":"npm"}