令一个 React 对话框 - React Poppop
可能有人会疑惑，为什么还需要一个 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
****
使用上很简便，最小设置仅需撰写以下代码，即可产生漂亮的对话框：
<PopPop open={true}>
<h1>Title</h1>
<p>Content</p>
</PopPop>
如果你也有在使用上遇到相似的问题，欢迎来试用！