sweetalert × React × TypeScript

2018-10-12

sweetalert v2.1.0では、text の型が string のため、html を記述することができません。

とはいえ、派生版である sweetalert2 は、開発は活発なものの、作りがイマイチで、使うのを諦めてしまいました。

で、どうやったら text に html が設定できるのか。

加えて、React のコンポーネントが設定できたら最高だよなぁと思いつつ、色々試してみたところ、以下でいけました。

import swal from "sweetalert"; import { renderToStaticMarkup } from "react-dom/server"; swal({ content: { attributes: { innerHTML: renderToStaticMarkup( <ReactComponent> <p>テキスト</p> </ReactComponent> ), }, element: "div", }, // htmlは型定義に含まれていないため、使用できない // html: true icon: "info", title: "タイトル", });

text に div が重複するケースも多いんですが、React のコンポーネントが使えないよりは断然マシかなと…。

© 2018 kk-web