react-bootstrap-dialogつくった

React Componentのnpm packagesをつくった。React + react-bootstrapの環境で、window.alertやwindow.confirmを使うとUIが浮いてしまうので、<Modal />を使うんだけど、毎回細かい定義をするのが面倒なので、メソッドのパラメータでサクッといろいろなダイアログを表示できるようにした。

https://github.com/akiroom/react-bootstrap-dialog/

デモはこちらからどうぞ。

<Dialog ref="dialog" /> を追加して、 this.refs.dialog.showAlert('Hello Dialog!') を呼ぶだけで、以下のようにメッセージダイアログを表示できる。エラー表示に使っているconsole.logwindow.alert をこちらに置き換えた方が綺麗に見える感じ。

https://gyazo.com/84e315aca42ac4dbe39e51ce3451bb53

もちろん、window.confirmのように選択肢を表示できるし、

https://gyazo.com/f8e8bfd41d9c652a55ed06a0828dc57e

ゴリゴリにカスタマイズできるようにもした。

https://gyazo.com/d9c073c6c7d66c05e5398f386345f452


テンプレート使ったおかげでかなり高速にnpm package化できたので、後で記事にしたい。README.mdを書くのが一番時間かかったような気がする。

Pocket
LINEで送る
LinkedIn にシェア

コメントを残す