react-component / notification

React Notification

rc-notification

React Notification UI Component

Install

Usage

import Notification from 'rc-notification';

Notification.newInstance({}, notification => {
  notification.notice({
    content: 'content'
  });
});

Compatibility

IE / Edge	Firefox	Chrome	Safari	Electron
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Example

http://localhost:8001

online example: https://notification-react-component.vercel.app

API

Notification.newInstance(props, (notification) => void) => void

props details:

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

notification.notice(props)

props details:

name	type	default	description
content	React.Element		content of notice
key	String		id of this notice
closable	Boolean		whether show close button
onClose	Function		called when notice close
duration	number	1.5	after duration of time, this notice will disappear.(seconds)
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 microsoft/TypeScript#28960.

notification.removeNotice(key:string)

remove single notice with specified key

notification.destroy()

destroy current notification

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rc-notification is released under the MIT license.

notification's Issues

Fix the style conflict in notice-wrapper and notice

Reproduction link

Steps to reproduce

1. Open the link and navigate to CodeSandbox.
2. Click on the button.
3. Check the styles in the red area.

What is expected?

Expect one style to take effect (notice-wrapper or notice).

What is actually happening?

Both notice-wrapper and notice are taking effect.

Environment	Info
antd	5.10.2
React	any
System	any
Browser	any

---

If you change the padding to another style, such as rotation, the styles will be even more disordered.

Problem identification result:
There is a conflict between configStyle at line 139 (outer) and config at line 147 (inner) in notification/src/NoticeList.tsx in the rc-notification package.

Solution approach:

Remove ...configStyle in the outer part and keep the setting of configClassName consistent, both passed to Notice.
Bind the style and className from config to the outer part.
If you have a better idea, please @ me. I am willing to participate in the discussion of this issue and create a fix PR.

Change the notification's background color.

I wonder to change the background color of notification.

notification.notice({
        content:
          <div className="bg-info">
            <span>添加成功！</span>
          </div>,
        closable: true,
        duration: 3.5,
      });

But have not change the nofitication, ugly, is not it?

Can you support some props to change the background of .rc-notification-notice

.rc-notification-notice {
  padding: 7px 20px 7px 10px;
  border-radius: 3px 3px;
  border: 1px solid #999;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border: 0px solid rgba(0, 0, 0, 0);
  background: #fff;
  display: block;
  width: auto;
  line-height: 1.5;
  vertical-align: middle;
  position: relative;
  margin: 10px 0;
}

not found

rc-notification will be yours. Oh yes, rc-notification will be yours.

删除updateKey后，引发的问题

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link
https://codesandbox.io/s/tishichaoguozuidaxianshishuwufaguanbi-ant-design-demo-forked-l3mc5?file=/index.js

Steps to reproduce
点击三下button, 最后一个message,无法手动删除。

What is expected?
message超过上限后，新增的message应该也能删除。

What is actually happening?
code： src/Notification.tsx 107 line
notice.key = updatedNotices[0].notice.key;
导致new message key变成old message key,无法手动关闭

Unable to close notification since on release v4.5.0

Our component library has been using rc-notification, and closing the notification started to not work since release v4.5.0. To be more specific, removeNotice method gets called, and I see that the notices array in the React state of rc-notification module removes the correct item. However, the state change does not get reflected in the UI, and the notification does not disappear from the screen.

Expected behavior:

• Invoking "removeNotice" method with valid key correctly removes the notification from the UI

Current behavior:

• Clicking on the close icon that calls "removeNotice" method removes the notice in the state correctly, but the notification does not disappear from the UI

[Bug] simple demo-updatable

recurrent

• link: http://react-component.github.io/notification/examples/simple.html
• click updatable twice
• close notification

notification appear repeatedly

建议允许传入ClassName

现在很难更改Notification的样式

ie8 white screen

nine out often trigger

readme.md 中的一个属性默认值写错了

notification.notice 的 style 默认值是 right: "50%"

请教下add()为什么要防止notice重复加入notices队列中

const key = notice.key = notice.key || getUuid();
假如 key = getUuid()这不是可以一直不重复吗？这样做的意义什么呢？，
就算有maxCount 的限制也只需要删掉最前面的一个就可以了，这样做的目的是为了什么，性能问题么？
小白请教下

index.d.ts为何没有提交npm

在content里自定义关闭

实现在content里自定义关闭按钮，点击该按钮可以关闭通知框

Allow to be closed with a click anywhere in the toast

Currently, when closable is true, a close button is displayed.

Some users complain because it is somehow tedious to click on a small button and would prefer to click anywhere in the toast to close it.

Most of notifications libraries allow it, see eg https://github.com/fkhadra/react-toastify

closeIcon overridden

The documentation states that closeIcon can be used to notification.notice(). Infact, it's overridden by newInstance() props:

https://github.com/react-component/notification/blob/3.3.1/src/Notification.jsx#L95

为什么我在nextjs里使用没有生效，只在控制台打印里close

功能点

1. 动画

<Notifications anim='fade' >
<Notification aim='zoom'>
<p></p>
</Notification>
</Notifications>

参考 http://react-component.github.io/css-transition-group/build/examples/alert.html
2. 定位

<Notification align='cc'>

参考： http://yiminghe.me/dom-align/build/examples/simple.html

When the notices become empty,the<Notification> is still in the body

TypeError: notification is null

Hello,

I don't understand why I've got this error.

I do a notification.open() in a componentDidUpdate.

It works outside, but inside the componentDidUpdate, I've got this error.

I've did this to debug:

  console.log(Notification, 'Notification')
  console.log(props, 'props')
  console.log(div, 'props')

  var notification = ReactDOM.render(React.createElement(Notification, props), div);

  console.log(notification) // it's null here

Notification returns something, props too, and div is existing. However notification is null here. Is it a problem with "react": "16.1.1"?

I really do not understand the bug. Mostly that it works if I open a notification via handleClick for instance. But not in didUpdate.

Ability to inject context...

I need to utilize context in content of Notification.
Can i retain the root component's context while using this component?

Why it does't come to center? If there miss something?

CloseIcion not working

version used : "rc-notification": "3.3.0",

i am trying to use my own close icon but its not working i have tried with svg also

 Notification.newInstance({}, notification => {
      notification.notice({
        content: 'content',
        closable: true,
        duration: 50,
        closeIcon: <div>X</div>
      });
    });

[v4.6.0] It seems that you should use `??` Instead of `| |`

• ant-design/ant-design#38259

Notification.newInstance 的方法是在源码的哪里定义的

想了解实现原理

closable 和 closeIcon 是不是没有用啊. 为什么我 传什么都是没有效果

  Notification.newInstance({}, notification => {
      notification.notice({
        content: 'content',
        closable: true,
        duration: 50,
        closeIcon: <div>X</div>
      });
    });

只看到有dom 结构 看不到 closeIcon 生效

希望增加 props 可控 onMouseEnter onMouseLeave。

hover Toast 会清除定时器，希望增加 props 可控。

notification/src/Notice.tsx

Line 113 in af67623

onMouseEnter={this.clearCloseTimer}

项目里如何只在一处地方添加`contextHolder`

rc-notification v5.0.5

1、多个页面都需要通知，每一处地方都需要添加contextHolder，很是麻烦，且不知是否有冲突。

2、有一些弹窗也需要通知，通知的同时需要关闭弹窗，一旦弹窗关闭了，通知也直接不见了。

因以上2点问题，我想问下有没有办法在根页面添加一次contextHolder后，其他页面直接调用通知就可以了？

Unable to close notification using the Enter key

Reproduction link

Steps to reproduce

1. Load the sandbox
2. Click Show notification
3. See that the close icon gets focus and turns red
4. See that the notification is not closed after 1s (simulated keyboard event via timeout)
5. (Optional) Simulate the click event and see that the notification gets closed after 1s

What is expected?

When close button has keyboard focus, pressing Enter on the keyboard should close the notification.

What is actually happening?

When close button has keyboard focus, pressing Enter on the keyboard does not close the notification.

Environment	Info
rc-notification	4.6.0
React	18
System	ALL
Browser	ALL

---

Ref: UIEN-1752

document is not defined on server side render

Guessing this library doesn't support SSR?

Unhandled Rejection at: Promise {
  <rejected> ReferenceError: document is not defined
    at Function.newNotificationInstance [as newInstance] (/Users/Dave/Projects/deedmob/client/node_modules/rc-notification/lib/Notification.js:176:13)
    at getNotificationInstance (/Users/Dave/Projects/deedmob/client/node_modules/antd/lib/notification/index.js:96:33)
    at Object.notice [as open] (/Users/Dave/Projects/deedmob/client/node_modules/antd/lib/notification/index.js:128:5)
    at Object.api.(anonymous function) [as success] (/Users/Dave/Projects/deedmob/client/node_modules/antd/lib/notification/index.js:178:20)
    at /Users/Dave/Projects/deedmob/client/build/webpack:/src/helpers/responseHandler.js:58:18
    at <anonymous>
    at process._tickDomainCallback (internal/process/next_tick.js:228:7) } reason: ReferenceError: document is not defined
    at Function.newNotificationInstance [as newInstance] (/Users/Dave/Projects/deedmob/client/node_modules/rc-notification/lib/Notification.js:176:13)
    at getNotificationInstance (/Users/Dave/Projects/deedmob/client/node_modules/antd/lib/notification/index.js:96:33)
    at Object.notice [as open] (/Users/Dave/Projects/deedmob/client/node_modules/antd/lib/notification/index.js:128:5)
    at Object.api.(anonymous function) [as success] (/Users/Dave/Projects/deedmob/client/node_modules/antd/lib/notification/index.js:178:20)
    at /Users/Dave/Projects/deedmob/client/build/webpack:/src/helpers/responseHandler.js:58:18
    at <anonymous>
    at process._tickDomainCallback (internal/process/next_tick.js:228:7)

need a feature, mask

Can I display a mask, while notication is show?

建议：使用 useImperativeHandle hook 代替 ref callback

背景

为了能在普通 JavaScript 函数中调用 <Notification ref={ref} /> 组件实例的方法，目前是通过 class component 的 ref callback 机制实现的，但因为依赖异步回调，导致上层 API 的使用也深受回调影响，如果可以通过某种方式同步获得组件的控制权，那么在 API 使用和封装上会变得优雅很多：

const instance = Notification.newInstance();
const key = instance.add({title: 'xxx'}); // 可以同步返回 key
instance.remove(key);

我们可以通过 useImperativeHandle hook 结合 ref 转发来实现此需求。

大致思路：

• 使用 Function Component 改写 Notification 组件
• Notification 组件通过 useImperativeHandle hook 和 forwardRef 暴露内部 add 和 remove 方法
• Notification.newInstance 通过 createRef 并把 ref.current 同步返回，这样就可以实现同步调用了

const Notification = React.forwardRef((props, ref) => {
  const [notices, setNotices] = useState([]);

  const add = notice => {
    // add notice
  };

  const remove = key => {
    // remove notice
  };

  // expose add & remove methods
  useImperativeHandle(ref, () => ({
    add,
    remove,
  }));

  return (
    <div>{noticeNodes}</div>
  );
});

Notification.newInstance = function newNotificationInstance(properties) {
  const ref = React.createRef();
  // append container stuff....
  ReactDOM.render(<ToastHub {...props} ref={ref} />, div);

  return {
    notice: noticeProps => ref.current.add(noticeProps),
    removeNotice: key => ref.current.remove(key),
    component: ref.current,
    destroy() {
      ReactDOM.unmountComponentAtNode(div);
      div.parentNode.removeChild(div);
    },
  };
}

支持 getContainer

因为一些特殊的场景需要，需要能够像其他组件一样能够自定义 notification 的容器~

removed 1.4.5 from npm repository

We antd version 2.9.0 for a while in the development and when we will send it to pre stage our deployment was failed with error:

npm ERR! fetch failed https://registry.npmjs.org/rc-notification/-/rc-notification-1.4.5.tgz
npm ERR! fetch failed with status code 404

Apply new feature for notification component

Good day,
I've some idea for the notification component and the user case as below.

As a user I want to keep the notification layer on my screen when the mouse over it, because the information is too long, I cannot get all the information before the notification layer gone. if I can stop the timer then I can keep the notification dialog there for lang time. I think is would be very helpful.

Can add this function to next release and also add a config item to disable/enable this feature? thanks.

与 rc-util 4.0.2 版本不兼容

Need be able to show last added notification on top.

I want to be able to show the last added notification on top of old ones.

rc-notification v5 has no "export default", readme need to update

Not working with react 18

Not working with react 18

谷歌标签页休眠导致maxCount属性失效

• 配置maxCount为1；
• 编写轮序每秒调用一次message;
• 当前页面message执行正确，每次仅存在一个message；
• 切换浏览器标签页面，等待5+秒；
• 返回浏览器标签页面，message存在5+个。
  代码在路径/rc-notification/es/Notification.js line56
  如果是切换浏览器标签页面的话，我认为此时notices的值并不可靠。

When running the tests: Cannot read property 'createElement' of undefined

This library causes the test-suite to fail. It is probably due to the jsdom environment, which does not allow by default executing scripts like document.createElement().

See https://github.com/jsdom/jsdom#executing-scripts for more information.

The rc-notification being a peer dependency of antd: ^3.0.0 in my case.

Stacktrace:

node node_modules/react-scripts-ts/scripts/test.js --runInBand --env=jsdom
node_modules/react-scripts-ts/scripts/test.js:22
  throw err;
  ^

TypeError: Cannot read property 'createElement' of undefined
    at Function.newNotificationInstance [as newInstance] (node_modules/antd/node_modules/rc-notification/lib/Notification.js:180:20)
    at getMessageInstance (node_modules/antd/lib/message/index.js:34:33)
    at notice (node_modules/antd/lib/message/index.js:65:5)
    at Object.error (node_modules/antd/lib/message/index.js:97:16)
    at src/components/form/input/CustomSelect.tsx:30:20
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:160:7)

Process finished with exit code 1

自定义关闭的文字

希望能实现自定义关闭的样式的接口，现在的Notification.js里是用span里包了字符x来实现关闭按钮，视觉稿上要用iconfont来实现关闭按钮

component does not work with React 16

The cause is the use of ReactDOM.render return value, that is an obsolete feature (also in React 15).
We should use ref instead.

https://facebook.github.io/react/docs/react-dom.html#render

组件的实现十分细节，叹为观止！！

纯粹感叹一下，自己关闭issue

Accessibility: making notifications visible to screen readers?

Problem
Screen** readers are unable to perceive the notifications.

Proposal
Would you be open to an MR that adds to aria-live="assertive" aria-atomic="true" to the Notice?

Outcome
The effect would be that when a notification is rendered, the message in the notification would be read by screen readers.

How to use it with React 18 without warning

As you know, React 18 introduces a new root API which provides better ergonomics for managing roots.

ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

How to use current library without above warning?

In view of this, I want to submit a PR, but I don't know if I need to do a major version update for this situation (eg: limit React in peerDependencies to be greater than 18)? Or do not update the major version, just in the source code Can a React version be judged to be compatible?

---

我尝试解决提PR, 采用了一个兼容修复这个警告的方法, 但是发现替换之后, 渲染执行的顺序跟以前不一样了.

背景: 源码中提供了2个示例(hooks和simple), 分别会先在开始去注册示例, 以hooks为例

ReactDOM.render时候, 渲染顺序如下:

可以看到, hooks示例中组件Demo在最后才开始渲染, 此时 instance 已经准备好了, 没有问题.

React 17 createRoot...render()时候, 渲染顺序如下:

可以看到, 组件Demo并没有到最后才渲染, 渲染的时候 instance 还是null, 导致通过hooks的方式使用时, 会无法使用.

实在没找到好的解决方案和思路, 为了更好的表达, 我提交了一个 Draft PR #193 , 期待大家参与讨论

---

更新: 通过对比发现, 可能是Dumi的问题, 参见: umijs/dumi#1071

Please update README for the hook verison notification.