{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install rc-notification"],"cli":null},"imports":["import Notification from 'rc-notification';","import type { NotificationInstance } from 'rc-notification';","import type { NoticeContent } from 'rc-notification';","const Notification = require('rc-notification');"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}