令一个 React 对话框 - React Poppop
发布于 4 个月前 作者 ctxhou 822 次浏览 来自 分享

可能有人会疑惑,为什么还需要一个 react 对话框?

目前已有许多 react 对话框的开源专案,目前在github上星数较多的专案有以下几个

  • react-modal
  • antd modal
  • react-modal-dialog

使用过许多 react modal 的开源专案,但一直找不到一个顺手的来用,以下列出试用后为何不符我本身需求的原因

总结使用上几个专案后,我认为现行的专案有一些缺点

react-modal

react-modal 是目前在 github 上最多颗星的对话框专案,他的弹性高,但使用上的缺点是每次都要重写 modal 的 style,亦须兼顾到 responsive 的问题,因此时常在写专案时都有不断在重复之感

antd modal

ant design 的 modal 很漂亮,但是如果专案中并没有想要导入 ant design 的话,单使用这个库会需要额外安装其他的插件

react-modal-dialog

此专案的设计上最贴近我的使用情境,使用上很方便,预设的style也满好看的。但因为他是以jss做为 css 的预设工具,如果原专案没有使用到 jss 的会载入此之后不会用到的库

最后是,我发现大多的专案没有兼顾到移动端touch 的动作,亦即无法透过 touch overlay 的方式关闭对话框

因此我决定重造一个能解决以上问题的 react 对话框 → react-poppop

react-poppop 的特点有:

  • 兼容移动端:支援移动端上的操作
  • 容易客制样式:使用 inline style 去操作外观,不会再载入额外的 css 处理库
  • 预设支援九种位置:支援九种位置摆放对话框,不需额外花时间去撰写样式
  • 使用React 16 Portal API:Portal 是 react 16 新的 api,这个库使用此 api 撰写。当然,亦兼容 v15

螢幕快照 2017-11-18 下午8.09.09.png****

使用上很简便,最小设置仅需撰写以下代码,即可产生漂亮的对话框:

<PopPop open={true}>
  <h1>Title</h1>
  <p>Content</p>
</PopPop>

如果你也有在使用上遇到相似的问题,欢迎来试用!

Github 连结:https://github.com/ctxhou/react-poppop

回到顶部