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

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

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

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

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

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

如果你正在搭建后台管理工具,又不想处理前端问题,推荐使用卡拉云 ,卡拉云是新一代低代码开发工具,可一键接入常见数据库及 API ,无需懂前端,仅需拖拽即可快速搭建属于你自己的后台管理工具,一周工作量缩减至一天,详见本文文末。

接下来我来介绍一下我用过且感觉不错的 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 中加入图表

消息提示组件及卡拉云

本文介绍了 5 款 React 实时消息提示通知(Message/Notification)组件,虽然这些组件库可以避免我们重复造轮子,但即便如此,前端调试有时也非常令人抓狂。如果不想处理前端问题,推荐使用卡拉云,卡拉云内置各类组件,无需懂任何前端,仅需拖拽即可快速生成。

卡拉云可帮你快速搭建企业内部工具,下图为使用卡拉云搭建的内部广告投放监测系统,无需懂前端,仅需拖拽组件,10 分钟搞定。你也可以快速搭建一套属于你的后台管理工具。

卡拉云企业内部工具

卡拉云是新一代低代码开发平台,与前端框架 Vue、React等相比,卡拉云的优势在于不用首先搭建开发环境,直接注册即可开始使用。开发者完全不用处理任何前端问题,只需简单拖拽,即可快速生成所需组件,可一键接入常见数据库及 API,根据引导简单几步打通前后端,数周的开发时间,缩短至 1 小时。立即免费试用卡拉云

扩展阅读:

相关文章
|
5月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
103 0
|
5月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
44 1
|
5月前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
106 1
|
5月前
|
存储 前端开发 JavaScript
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
|
5月前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
47 0
|
5月前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理
|
5月前
|
资源调度 前端开发 JavaScript
React组件
React组件
58 0
|
前端开发 JavaScript
组件与props (精读React官方文档—04)
组件与props (精读React官方文档—04)
99 0
|
前端开发 安全 JavaScript
【Message 全局提示】基于 React 实现 Message 组件
使用 ReactDOM.createRoot、React.forwardRef、React.useImperativeHandle 实现 Message 组件。使用 Web Crypto API 生成符合密码学要求的安全的随机 ID。
|
前端开发
react笔记之学习之添加card组件
react笔记之学习之添加card组件
170 0
react笔记之学习之添加card组件
下一篇
无影云桌面