2021年顶级React模式组件

2020年12月30日11:27:19 发表评论 67 次浏览

本文概述

React.js拥有一个不断发展的社区, 经常会提出许多不同的解决方案。在这样的社区中, 库集成, UI元素和开发问题的解决方案通常可以作为组件使用。

大多数Web应用程序都依赖并且经常以自定义方式使用的一种功能称为"情态的。它有助于使用户界面更加方便。这种类型的组件出现在其他UI组件的顶部。它可以用作弹出窗口, 在该弹出窗口中显示一条特定信息, 该信息需要其用户号召采取行动, 而无需导航到另一个页面。

在本文中, 我们将看一下React社区中最好的模式组件, 这些组件可以帮助你构建更好的用户界面。我们将列出有关这些组件提供哪些功能或自定义的组件列表。

反应模态

触发方式

由维护React.js社区, 这是可用于React应用程序的最流行的模态组件之一。它提供了具有易于使用功能的完全可定制的模态组件。你可以根据需要使用响应式设计来调整模态组件的大小。可以根据设计要求进行定位, 并可以使用内联样式或类名。它还支持在打开和关闭模态时使用CSS类实现过渡。使用过渡有助于提供更流畅的用户体验。

该组件之所以受欢迎的主要原因之一是因为它是使用易用性。它旨在完全访问并提供支持威海使用辅助技术, 例如屏幕阅读器。

  • 官方文件
  • 的GitHub

反应确认警报

反应确认警报

react-confirm-alert是Web应用程序的模式组件。它具有可扩展的道具列表, 用于自定义模态组件的样式和行为。与本文中列出的某些组件相比, 它具有较小的API。但是, 其较小的API确实具有模式组件的最必要的可配置选项。也可以将其配置为父组件, 并接受其他React组件作为子组件。默认情况下, 它不支持辅助功能, 因此你必须添加配置选项。一种方法是扩展此组件。对于必须使用警报类型对话框的用例, 此模式组件使工作更加轻松。

  • 官方文件
  • 的GitHub

罗达尔

杆状的

Rodal是React社区中存在的少数模态组件之一, 并且是开源的, 着重于动画。它支持开箱即用的各种类型的动画。它提供了一系列更倾向于支持各种动画行为的道具。该模态组件具有九种不同的动画类型:

我们为制作了一个自定义演示.
不完全是。点击这里查看.

2021年顶级React模式组件1
  • 放大
  • 褪色
  • 翻转
  • 旋转
  • 向上滑动
  • 滑下
  • slideLeft
  • 向右滑动

除了支持各种动画类型, 作为开发人员, 你还可以控制动画结束时处理动作的行为。打开或关闭模式时, 还可以合并混合的动画类型。它提供了两个道具enterAnimation和离开动画接受动画类型。对于每种动画类型, 都提供以毫秒为单位的持续时间, 以控制整个动作的时间。

  • 的GitHub

React.js弹出

reactjs弹出窗口

它是一个简单的React弹出组件, 可帮助你为下一个React应用创建简单和复杂的模态, 工具提示和菜单。它是更高级和维护良好的模态组件之一。它支持TypeScript, 内联样式, 样式类名以及样式化组件, CSS-in-JS库和动画。作为图书馆, 它的装束也很小3kB.

该库提供两种类型的模态组件:

  • 对话框或弹出窗口满足要求的用例的简单组件
  • 定制组件, 其样式, 度量和行为均可定制

从v2该库也支持可及性并遵循WAI-ARIA规范指南, 该指南关于如何构建支持屏幕阅读器等可访问技术的模式组件。它支持动画。将动画添加到自定义模式组件的推荐方法是使用CSS类和关键帧。请注意, 此库仅在模态组件打开时支持动画。

  • 官方文件
  • 的GitHub

风格的反应模态

风格反应模式

样式化的React Modal的构建和基于样式化的组件图书馆。如果你的Web应用程序已经在使用CSS-in-JS库(例如样式组件, emotion.js或Chakra UI), 那么此模式组件将是一个很好的选择。它使用最新的React16倍挂钩等功能。它具有简洁易用的API。它提供了可以调用的功能, 以在打开模态之前或关闭模态之后触发进一步的动作。当从键盘上按下退出键时, 它还支持消除模式部分。

  • 的GitHub

反应覆盖

开放式

react-overlays是一个工具包, 用于创建功能性叠加层, 工具提示, 下拉菜单和模式组件。该工具包提供的这些组件旨在与其他UI库和框架集成。默认情况下, 这些组件与样式无关, 并且不附带任何CSS。要使用它们, 你必须提供自己的样式, 这是一个优势, 并且可以灵活使用它们。

模态组件支持默认情况下禁用模态交互的背景。它通过遵循ARIA准则来支持可访问性, 并添加了适当的ARIA角色。该组件在另一个组件的帮助下支持和控制动画。<过渡/>.

  • 官方文件
  • 的GitHub

反应引导

反应引导

react-bootstrap是一个完整的UI库, 由从头开始用JavaScript编写的组件组成。这些组件可以在React应用程序中轻松使用和扩展。模态是该库提供的具有易于使用的API的组件之一。在你的React应用程序中使用模态组件可用于显示灯箱, 用户通知或完全自定义的内容。此UI库不支持嵌套模态, 但是, 如果有此要求, 则可以使用反应覆盖.

与普通的Bootstrap库不同, 此UI库支持自动对焦在模态分量上它具有默认的幻灯片和淡入淡出动画, 可以对其进行配置, 以便可以在不使用动画的情况下使用模式组件。由于整个库在实现时都考虑到了可访问性, 因此支持可访问性功能。最终结果是一组在Vanilla Bootstrap中不可用的可访问组件。

  • 官方文件
  • 的GitHub

反应模态视频

反应模态视频

许多最终用户希望, 当他们在React应用程序中单击视频时, 而不是重定向到新的网页或视频网站的原始来源, 而是在同一网页上播放视频。在不导航到其他网页且不打扰用户访问流程的情况下, 以模态组件显示视频是改善用户体验的好方法。

react-modal-video是组件实用程序, 可让你在模式组件内部渲染和显示视频。默认情况下, 它支持来自各种来源的视频, 例如YouTube, Vimeo, 优酷, 自定义资源。该组件的API具有用于每种资源类型的本机视频播放功能的可配置选项, 可用于提供本机体验。模态组件还支持动画过渡, 并且可以通过键盘导航和屏幕阅读器进行访问。

  • 官方文件
  • 的GitHub

总结

列表中包括的开源库是基于个人经验或积极维护的。这些UI组件库的目的是让你在模式组件中表示数据, 并在构建React应用程序的过程中获得良好的开发人员体验。考虑到开发成本, 这些库提供的某些集成很难从头开始实现。

如果你熟悉React生态系统中本文未提及的任何其他模式组件库, 请在下面的评论部分保留其链接, 并告诉我们你为什么喜欢它。

全面了解生产React应用

调试React应用程序可能很困难, 尤其是当用户遇到难以重现的问题时。如果你有兴趣监视和跟踪Redux状态, 自动显示JavaScript错误以及跟踪缓慢的网络请求和组件加载时间,

尝试notlogy

.

2021年顶级React模式组件2
LogRocket仪表板免费试用横幅

日志火箭就像Web应用程序的DVR, 实际上记录了React应用程序中发生的一切。你可以汇总并报告问题发生时应用程序所处的状态, 而不用猜测为什么会发生问题。 notlogy还监视你的应用程序的性能, 并使用客户端CPU负载, 客户端内存使用情况等指标进行报告。

notlogy Redux中间件软件包在你的用户会话中增加了一层可见性。 notlogy记录Redux存储中的所有操作和状态。

现代化如何调试React应用程序-免费开始监控.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: