Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Notification
✓ import Notification from 'rc-notification';
✗ import { Notification } from 'rc-notification';
The primary default export is the `Notification` component/factory, often used via `Notification.newInstance`.
NotificationInstance
✓ import type { NotificationInstance } from 'rc-notification';
TypeScript type for the object returned by `Notification.newInstance` or `getInstance`.
NoticeContent
✓ import type { NoticeContent } from 'rc-notification';
TypeScript type for the configuration object passed to `notificationInstance.notice`.
Notification (CommonJS)
✓ const Notification = require('rc-notification');
For CommonJS environments, use `require` for the default export.
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.
import Notification from 'rc-notification';
import React from 'react';
import ReactDOM from 'react-dom/client';
import type { NotificationInstance, NoticeContent } from 'rc-notification';
// Assuming a root element exists in your HTML, e.g., <div id="root"></div>
const rootElement = document.getElementById('root');
if (!rootElement) throw new Error('Root element not found');
const root = ReactDOM.createRoot(rootElement);
root.render(
<React.StrictMode>
<button onClick={() => {
Notification.newInstance({
style: { top: 65, left: '50%', transform: 'translateX(-50%)' }, // Center horizontally
maxCount: 3,
getContainer: () => document.body, // Attach notification container to body
}, (notification: NotificationInstance) => {
const noticeProps: NoticeContent = {
content: 'Hello, this is a TypeScript notification!',
duration: 4.5,
closable: true,
onClose() {
console.log('TypeScript Notification closed!');
},
};
notification.notice(noticeProps);
notification.notice({
content: 'Another important message via TypeScript.',
duration: 3,
key: 'unique_message_key',
});
});
}} style={{ padding: '10px 20px', fontSize: '16px', cursor: 'pointer' }}>
Show Notifications
</button>
</React.StrictMode>
);
Debug
Known issues
breakingA 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.fixCarefully 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.
affects: >=1.0.0 for `@rc-component/notification` (relative to `rc-notification`'s lifecycle)
gotchaVersions 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.fixEnsure 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.
affects: =5.6.1, =5.6.2
gotcha`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.fixYou 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.
affects: all
gotchaCalling `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.fixInvoke `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.
affects: all
gotchaThe `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.fixAlways specify a `duration` (in seconds) if you want notifications to auto-close. Set `duration: 0` for persistent notifications that require user interaction to dismiss.
affects: all
Errors
Common errors & fixes
TypeError: Notification.newInstance is not a function
`Notification` was imported incorrectly as a named export instead of a default export.
fixChange your import statement from `import { Notification } from 'rc-notification';` to `import Notification from 'rc-notification';`. TS2345: Argument of type '{ /* ... */ }' is not assignable to parameter of type 'NoticeContent'.
When using TypeScript, the object passed to `notificationInstance.notice` does not conform to the `NoticeContent` interface, or required properties are missing/incorrect.
fixConsult 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.
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
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.
fixDo 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.
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.
This is a generic React error often indicating a version mismatch between `react` and `react-dom` peer dependencies or fundamental misuse of React APIs.
fixEnsure 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`.
Audit
Dependencies
reactrequiredRequired as a peer dependency for all React components.
react-domrequiredRequired as a peer dependency for rendering React components into the DOM.