React UI Notification Component

Common errors

• TypeError: Notification.newInstance is not a function

  cause `Notification` was imported incorrectly as a named export instead of a default export.
  fix Change 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'.

  cause When using TypeScript, the object passed to `notificationInstance.notice` does not conform to the `NoticeContent` interface, or required properties are missing/incorrect.
  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.

• Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

  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.
  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.

• 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.

  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.
  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`.

Warnings

• breaking 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.
  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.
• gotcha 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.
  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.
• 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.
  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.
• gotcha 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.
  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.
• gotcha 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.
  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.

Install

• npm install rc-notification npm
• yarn add rc-notification yarn
• pnpm add rc-notification pnpm

Imports

• Notification
  wrong:

  import { Notification } from 'rc-notification';

  correct:

  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.

Quickstart

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>
);