支援移動端、好看、易用的 React 對話框 - React Poppop

#1

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

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

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

使用过许多 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

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

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

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

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

1 Like