@rc-component/notification
+
Part of the Ant Design ecosystem.
🔔 Hook-based React notification primitives for stacked, animated, and accessible notices.
+ +
+ 
+ 
+ 
+ 
+ 
Part of the Ant Design ecosystem.
🔔 Hook-based React notification primitives for stacked, animated, and accessible notices.
+ +
+
+
+
+
+
English | 简体中文
+ +## Highlights + +- `useNotification` hook returning an API and React holder element. +- Top, bottom, left, and right placements with max-count limiting. +- Closable notices, duration timers, progress display, hover pause, and stacked layout. +- Custom motion, semantic `classNames` / `styles`, progress component override, and provider-level classes. +- TypeScript definitions for notification config, API, list config, and progress props. +- Used by Ant Design as the shared notification foundation. ## Install -[](https://npmjs.org/package/@rc-component/notification) +```bash +npm install @rc-component/notification +``` ## Usage -```js -import Notification from '@rc-component/notification'; +```tsx | pure +import { useNotification } from '@rc-component/notification'; + +export default () => { + const [api, holder] = useNotification(); + + return ( + <> + {holder} + + + ); +}; +``` -Notification.newInstance({}, (notification) => { - notification.notice({ - content: 'content', +```tsx | pure +import { NotificationProvider, useNotification } from '@rc-component/notification'; + +const Demo = () => { + const [api, holder] = useNotification({ + placement: 'topRight', + maxCount: 3, + showProgress: true, + pauseOnHover: true, + stack: true, }); -}); -``` -## Compatibility + return ( + <> + {holder} + + + ); +}; + +export default () => ( +| name | -type | -default | -description | -
|---|---|---|---|
| prefixCls | -String | -- | prefix class name for notification container | -
| style | -Object | -{'top': 65, left: '50%'} | -additional style for notification container. | -
| getContainer | -getContainer(): HTMLElement | -- | function returning html node which will act as notification container | -
| maxCount | -number | -- | max notices show, drop first notice if exceed limit | -
| name | -type | -default | -description | -
|---|---|---|---|
| content | -React.Element | -- | content of notice | -
| key | -String | -- | id of this notice | -
| closable | -Boolean | { closeIcon: ReactNode, onClose: VoidFunction } | -- | whether show close button | -
| onClose | -Function | -- | called when notice close | -
| duration | -number | false | -4.5 | -The delay for automatic closing in seconds. Set to 0 or false to not close automatically. | -
| showProgress | -boolean | -false | -show with progress bar for auto-closing notification | -
| pauseOnHover | -boolean | -true | -keep the timer running or not on hover | -
| style | -Object | -{ right: '50%' } | -additional style for single notice node. | -
| closeIcon | -ReactNode | -- | specific the close icon. | -
| props | -Object | -- | An object that can contain data-*, aria-*, or role props, to be put on the notification div. This currently only allows data-testid instead of data-* in TypeScript. See https://github.com/microsoft/TypeScript/issues/28960. |
-
Ant Design 生态的一部分。
🔔 React 通知组件，支持堆叠、位置、动画和全局调用。
+ +
+
+
+
+
+
English | 简体中文
+ +## 特性 + +- `useNotification` 钩子返回 API 和 React 持有者元素。 +- 具有最大数量限制的顶部、底部、左侧和右侧展示位置。 +- 可关闭通知、持续计时器、进度显示、悬停暂停和堆叠布局。 +- 支持动画自定义、语义化 `classNames` / `styles` 、细节组件覆盖和 Provider 级类。 +- 通知配置、API、列表配置和进度属性的 TypeScript 定义。 +- 被 Ant Design 用作共享的 notification 基础能力。 + +## 安装 + +```bash +npm install @rc-component/notification +``` + +## 使用 + +```tsx | pure +import { useNotification } from '@rc-component/notification'; + +export default () => { + const [api, holder] = useNotification(); + + return ( + <> + {holder} + + + ); +}; +``` + +```tsx | pure +import { NotificationProvider, useNotification } from '@rc-component/notification'; + +const Demo = () => { + const [api, holder] = useNotification({ + placement: 'topRight', + maxCount: 3, + showProgress: true, + pauseOnHover: true, + stack: true, + }); + + return ( + <> + {holder} + + + ); +}; + +export default () => ( +1
, + closable: false, + duration: 0, + }); + }); + + expect(document.querySelector('.test')).toBeTruthy(); + expect(document.querySelector('.rc-notification-notice-close')).toBeFalsy(); + }); + it('works with multi instance', () => { const { instance } = renderDemo(); @@ -637,7 +656,7 @@ describe('Notification.Basic', () => { it('should style work', () => { const { instance } = renderDemo({ style: () => ({ - content: 'little', + content: '"little"', }), }); @@ -645,9 +664,7 @@ describe('Notification.Basic', () => { instance.open({}); }); - expect(document.querySelector('.rc-notification')).toHaveStyle({ - content: 'little', - }); + expectContentStyle('.rc-notification', 'little'); }); it('should open style and className work', () => { @@ -656,15 +673,13 @@ describe('Notification.Basic', () => { act(() => { instance.open({ style: { - content: 'little', + content: '"little"', }, className: 'bamboo', }); }); - expect(document.querySelector('.rc-notification-notice')).toHaveStyle({ - content: 'little', - }); + expectContentStyle('.rc-notification-notice', 'little'); expect(document.querySelector('.rc-notification-notice')).toHaveClass('bamboo'); }); @@ -706,7 +721,7 @@ describe('Notification.Basic', () => { description: 'little', styles: { section: { - content: 'light', + content: '"light"', }, }, classNames: { @@ -715,9 +730,7 @@ describe('Notification.Basic', () => { }); }); - expect(document.querySelector('.rc-notification-notice-section')).toHaveStyle({ - content: 'light', - }); + expectContentStyle('.rc-notification-notice-section', 'light'); expect(document.querySelector('.rc-notification-notice-section')).toHaveClass('section-class'); }); @@ -729,7 +742,7 @@ describe('Notification.Basic', () => { icon: , styles: { wrapper: { - content: 'little', + content: '"little"', }, }, classNames: { @@ -738,9 +751,7 @@ describe('Notification.Basic', () => { }); }); - expect(document.querySelector('.rc-notification-notice-wrapper')).toHaveStyle({ - content: 'little', - }); + expectContentStyle('.rc-notification-notice-wrapper', 'little'); expect(document.querySelector('.rc-notification-notice-wrapper')).toHaveClass('bamboo'); }); @@ -777,16 +788,16 @@ describe('Notification.Basic', () => { }, styles: { title: { - content: 'global-title', + content: '"global-title"', }, description: { - content: 'global-description', + content: '"global-description"', }, actions: { - content: 'global-actions', + content: '"global-actions"', }, icon: { - content: 'global-icon', + content: '"global-icon"', }, }, }); @@ -824,24 +835,24 @@ describe('Notification.Basic', () => { 'global-title', 'notice-title', ); + expectContentStyle('.rc-notification-notice-title', 'global-title'); expect(document.querySelector('.rc-notification-notice-title')).toHaveStyle({ - content: 'global-title', marginTop: '1px', }); expect(document.querySelector('.rc-notification-notice-description')).toHaveClass( 'global-description', 'notice-description', ); + expectContentStyle('.rc-notification-notice-description', 'global-description'); expect(document.querySelector('.rc-notification-notice-description')).toHaveStyle({ - content: 'global-description', marginRight: '2px', }); expect(document.querySelector('.rc-notification-notice-actions')).toHaveClass( 'global-actions', 'notice-actions', ); + expectContentStyle('.rc-notification-notice-actions', 'global-actions'); expect(document.querySelector('.rc-notification-notice-actions')).toHaveStyle({ - content: 'global-actions', marginBottom: '3px', }); expect(document.querySelector('.actions')).toBeFalsy(); @@ -849,8 +860,8 @@ describe('Notification.Basic', () => { 'global-icon', 'notice-icon', ); + expectContentStyle('.rc-notification-notice-icon', 'global-icon'); expect(document.querySelector('.rc-notification-notice-icon')).toHaveStyle({ - content: 'global-icon', marginLeft: '4px', }); }); @@ -875,10 +886,10 @@ describe('Notification.Basic', () => { }, styles: { list: { - content: 'root-list', + content: '"root-list"', }, listContent: { - content: 'little', + content: '"little"', }, }, }); @@ -887,13 +898,9 @@ describe('Notification.Basic', () => { instance.open({}); }); - expect(document.querySelector('.rc-notification-list')).toHaveStyle({ - content: 'root-list', - }); + expectContentStyle('.rc-notification-list', 'root-list'); expect(document.querySelector('.rc-notification-list')).toHaveClass('root-list'); - expect(document.querySelector('.rc-notification-list-content')).toHaveStyle({ - content: 'little', - }); + expectContentStyle('.rc-notification-list-content', 'little'); expect(document.querySelector('.rc-notification-list-content')).toHaveClass('bamboo'); }); diff --git a/tsconfig.json b/tsconfig.json index 19a30b9..5c36c9d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,10 +8,39 @@ "skipLibCheck": true, "esModuleInterop": true, "paths": { - "@/*": ["src/*"], - "@@/*": [".dumi/tmp/*"], - "rc-notification": ["src/index.tsx"] + "@/*": [ + "src/*" + ], + "@@/*": [ + ".dumi/tmp/*" + ], + "@rc-component/notification": [ + "src/index.ts" + ], + "rc-notification": [ + "src/index.ts" + ] }, - "types": ["vitest/globals"] - } + "types": [ + "vitest/globals" + ], + "ignoreDeprecations": "5.0" + }, + "include": [ + "src", + "docs", + "tests", + ".dumirc.ts", + ".fatherrc.ts", + "vitest.config.ts", + "vitest-setup.ts" + ], + "exclude": [ + "node_modules", + "lib", + "es", + "dist", + "docs-dist", + ".dumi" + ] } diff --git a/vercel.json b/vercel.json new file mode 100644 index 0000000..5f9139e --- /dev/null +++ b/vercel.json @@ -0,0 +1,6 @@ +{ + "framework": "umijs", + "installCommand": "npm install", + "buildCommand": "npm run build", + "outputDirectory": "docs-dist" +}