5款 React 实时消息提示通知(Message/Notification)组件推荐与测评

5款 React 实时消息提示通知(Message/Notification)组件推荐与测评

本文完整版：《5款 React 实时消息提示通知(Message/Notification)组件推荐与测评》

React 消息提示通知组件（Message / Notification）是我们日常开发中经常使用的组件，它可用作与用户交互的反馈提示，信息提交成功、错误、操作警告等场景使用。原生JavaScript 提供了alert、prompt、confirm 等方法，这三个方法的不支持定制化，使用场景严重受限，特别是 alert 在浏览器外弹窗，体验非常糟糕。因此要想给用户提供良好的使用体验，我们需要封装一个定制化较好的 React 消息提示组件，这种组件看似简单，但也存在非常多深坑要小心，例如遮罩层、消失时间、点击事件的冒泡处理等。

我自己在开发和研究 Message / Notification 功能组件时，发现其实 Github 上有非常多制作精良，使用场景定位清晰的第三方消息提示组件库可用，社区成熟，代码简洁，直接引用即可，完全没必要自己写，本文给大家推荐 5 款我用过的开源消息提示库，各有优势，可按需自取。

接下来我来介绍一下我用过且感觉不错的 5 款常见的 React Message / Notification 组件，大家可根据自己实现需求自取。

• React Toastify - 专注实时消息提示 各类样式随意修改 你想要的它都有
• React Hot Toast - 动效丰富、代码简洁、样式自定义、轻量级消息提示组件
• Notistack - 轻量级，适合基础提示的应用场景
• React Notification System - 带有按钮的消息弹窗组件，给用户更多交互
• Reapop - UI漂亮、多种可定义样式、动效丰富、轻量级

React Toastify - 专注实时消息提示 各类样式随意修改 你想要的它都有

react-toastify

react-toastify 是简洁高效的消息提示组件库，常规的成功、错误、警告样式随意挑选。配置简单，几秒钟就能完成你需要的提示消息样式，更不用说常规的颜色、字体、字号、弹出位置等细节，更是随意修改。

• 傻瓜式配置，10秒钟完成所有设置工作
• 可定制开发，简单便捷
• 可关闭滑动动画效果
• 可在提示框中嵌入 React 组件
• 可定义每个 toast 行为
• 有进度条显示
• 白天夜间模式自动切换

扩展阅读：《7 款顶级好用的 React 移动端 ui 组件库测评推荐》

React Hot Toast - 动效丰富、代码简洁、样式自定义、轻量级消息提示组件

react-hot-toast

react-hot-toast 消息提示组件库，可配置自定义操作，提示框持续时间，文本样式，图表样式等，提示框可带按键，与用户有更多的交互。react-hot-toast 的动画效果非常细腻，不仅有提示框本身的弹出效果，提示框左侧的 icon 也包含丰富的动画效果，让引入 react-hot-toast 的项目看起来非常高级。

• CSS 效果易于自定义
• 轻量级 - 小于 5KB
• Promise API
• 支持 Emoji 表情
• 丰富的动画效果

扩展阅读：《6 款好用的 React table 表格组件测评推荐》

Notistack - 轻量级，适合基础提示的应用场景

notistack

notistack 提示消息组件库功能非常简洁，成功、错误、警告、信息这些基本功能外，还有个可与用户交互的提示框，内嵌了一个点击事件的按钮，可让用户在看到提示后，执行一个事件。notistack 样式高度可定制，改几个参数，让提示框符合你的网站风格，一个组件解决所有提示问题。

扩展阅读：《6 款最棒的开源 React admin 后台管理框架测评》

React Notification System - 带有按钮的消息弹窗组件，给用户更多交互

react-notification-system

react-notification-system 并不是一个复杂的消息提示组件，但它的样式十分丰富，常规的成功、错误、警告之外，还有带样式的按钮可与用户进行交互，也有强警告框，弹出后一直悬停在屏幕上，直至用户点击关闭才会小时。

扩展阅读：《7 款开源顶级 React ui 组件库推荐测评》

Reapop - UI漂亮、多种可定义样式、动效丰富、轻量级

reapop

reapop UI 非常漂亮，内置三种可选样式，微软风、Linux 风和 Bootstrap 风，配置非常简单，简单改个布尔值就可以了。Reapop 提示框的动效很细腻，不仅有常规的滑动弹出，还有闪现和渐变弹出等效果。当然，Reapop 也可以在提示框上加上两组按钮，方便我们在提示用户的同时，让用户执行触发相对应的事件。

扩展阅读：《React Echarts 使用教程 - 如何在 React 中加入图表》