feat: add custom progress component support

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: zombieJ

src/Notification.tsx

@@ -3,6 +3,8 @@ import { clsx } from 'clsx';
 import useNoticeTimer from './hooks/useNoticeTimer';
 import { useEvent } from '@rc-component/util';
 import useClosable, { type ClosableType } from './hooks/useClosable';
+import DefaultProgress from './Progress';
+import type { NotificationProgressProps } from './Progress';
 
 export interface NotificationClassNames {
   wrapper?: string;
@@ -22,13 +24,18 @@ export interface NotificationStyles {
   progress?: React.CSSProperties;
 }
 
+export interface ComponentsType {
+  progress?: React.ComponentType<NotificationProgressProps>;
+}
+
 export interface NotificationProps {
   // Style
   prefixCls: string;
   className?: string;
   style?: React.CSSProperties;
   classNames?: NotificationClassNames;
   styles?: NotificationStyles;
+  components?: ComponentsType;
 
   // UI
   title?: React.ReactNode;
@@ -65,6 +72,7 @@ const Notification = React.forwardRef<HTMLDivElement, NotificationProps>((props,
     style,
     classNames,
     styles,
+    components,
 
     // UI
     title,
@@ -104,6 +112,7 @@ const Notification = React.forwardRef<HTMLDivElement, NotificationProps>((props,
   const [onResume, onPause] = useNoticeTimer(duration, onInternalClose, setPercent, !!showProgress);
 
   const validPercent = 100 - Math.min(Math.max(percent * 100, 0), 100);
+  const Progress = components?.progress || DefaultProgress;
 
   React.useEffect(() => {
     if (!pauseOnHover) {
@@ -230,17 +239,18 @@ const Notification = React.forwardRef<HTMLDivElement, NotificationProps>((props,
       {actions && <div className="actions">{actions}</div>}
 
       {showProgress && typeof duration === 'number' && duration > 0 && (
-        <progress
+        <Progress
           className={clsx(`${noticePrefixCls}-progress`, classNames?.progress)}
-          max="100"
-          value={validPercent}
+          percent={validPercent}
           style={styles?.progress}
         />
       )}
     </div>
   );
 });
 
-Notification.displayName = 'Notification';
+if (process.env.NODE_ENV !== 'production') {
+  Notification.displayName = 'Notification';
+}
 
 export default Notification;

src/NotificationList.tsx

@@ -5,6 +5,7 @@ import * as React from 'react';
 import type { StackConfig } from './interface';
 import { NotificationContext } from './legacy/NotificationProvider';
 import Notification, {
+  type ComponentsType,
   type NotificationClassNames,
   type NotificationProps,
   type NotificationStyles,
@@ -29,6 +30,7 @@ export interface NotificationListProps {
   pauseOnHover?: boolean;
   classNames?: NotificationClassNames;
   styles?: NotificationStyles;
+  components?: ComponentsType;
   stack?: boolean | StackConfig;
   motion?: CSSMotionProps | ((placement: Placement) => CSSMotionProps);
   className?: string;
@@ -52,6 +54,7 @@ const NotificationList: React.FC<NotificationListProps> = (props) => {
     pauseOnHover,
     classNames,
     styles,
+    components,
     stack: stackConfig,
     motion,
     placement,
@@ -218,6 +221,10 @@ const NotificationList: React.FC<NotificationListProps> = (props) => {
                       ...config.styles?.progress,
                     },
                   }}
+                  components={{
+                    ...components,
+                    ...config.components,
+                  }}
                   hovering={stackEnabled && listHovering}
                   pauseOnHover={config.pauseOnHover ?? pauseOnHover}
                   onClose={() => {

src/Notifications.tsx

@@ -9,12 +9,14 @@ import NotificationList, {
   type Placement,
   type StackConfig,
 } from './NotificationList';
+import type { ComponentsType } from './Notification';
 
 export interface NotificationsProps {
   // Style
   prefixCls?: string;
   classNames?: NotificationClassNames;
   styles?: NotificationStyles;
+  components?: ComponentsType;
   className?: (placement: Placement) => string;
   style?: (placement: Placement) => React.CSSProperties;
 
@@ -54,6 +56,7 @@ const Notifications = React.forwardRef<NotificationsRef, NotificationsProps>((pr
     pauseOnHover,
     classNames,
     styles,
+    components,
     className,
     style,
     onAllRemoved,
@@ -159,6 +162,7 @@ const Notifications = React.forwardRef<NotificationsRef, NotificationsProps>((pr
             pauseOnHover={pauseOnHover}
             classNames={classNames}
             styles={styles}
+            components={components}
             className={className?.(placement)}
             style={style?.(placement)}
             motion={motion}

src/Progress.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+export interface NotificationProgressProps {
+  className?: string;
+  style?: React.CSSProperties;
+  percent: number;
+}
+
+const Progress: React.FC<NotificationProgressProps> = ({ className, style, percent }) => (
+  <progress className={className} max="100" value={percent} style={style} />
+);
+
+export default Progress;

src/hooks/useNotification.tsx

@@ -84,6 +84,7 @@ export default function useNotification(
     pauseOnHover,
     classNames,
     styles,
+    components,
     maxCount,
     className,
     style,
@@ -113,6 +114,7 @@ export default function useNotification(
       pauseOnHover={pauseOnHover}
       classNames={classNames}
       styles={styles}
+      components={components}
       className={className}
       style={style}
       onAllRemoved={onAllRemoved}

src/index.ts

@@ -2,6 +2,9 @@ import useNotification from './hooks/useNotification';
 import Notice from './legacy/Notice';
 import type { NotificationAPI, NotificationConfig } from './hooks/useNotification';
 import NotificationProvider from './legacy/NotificationProvider';
+import Progress from './Progress';
+import type { ComponentsType } from './Notification';
+import type { NotificationProgressProps } from './Progress';
 
-export { useNotification, Notice, NotificationProvider };
-export type { NotificationAPI, NotificationConfig };
+export { useNotification, Notice, NotificationProvider, Progress };
+export type { NotificationAPI, NotificationConfig, ComponentsType, NotificationProgressProps };

tests/index.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import type { NotificationAPI, NotificationConfig } from '../src';
+import type { NotificationAPI, NotificationConfig, NotificationProgressProps } from '../src';
 import { useNotification } from '../src';
 
 require('../assets/index.less');
@@ -966,6 +966,33 @@ describe('Notification.Basic', () => {
 
       expect(document.querySelector('.rc-notification-notice-progress')).toBeFalsy();
     });
+
+    it('supports custom progress component', () => {
+      const CustomProgress: React.FC<NotificationProgressProps> = ({ className, percent }) => (
+        <div className={className} data-testid="custom-progress">
+          {percent}
+        </div>
+      );
+
+      const { instance } = renderDemo({
+        duration: 1,
+        components: {
+          progress: CustomProgress,
+        },
+      });
+
+      act(() => {
+        instance.open({
+          description: <p className="test">1</p>,
+          showProgress: true,
+        });
+      });
+
+      expect(document.querySelector('progress')).toBeFalsy();
+      expect(document.querySelector('.rc-notification-notice-progress')?.textContent).toEqual(
+        '100',
+      );
+    });
   });
 
   describe('Modifying properties through useState can take effect', () => {