sweetalert × React × TypeScript

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 のコンポーネントが使えないよりは断然マシかなと…。