バニラJS対応(jQuery非依存)の通知(トースト)系ライブラリ「Notyf」の利用方法

以前に通知(トースト)系ライブラリ「Toastr」の利用方法をメモしたが、こちらはjQueryが必須となる。できればバニラJSでも使えるようなライブラリが無いか探したところ「Notyf」が軽量且つシンプルで使いやすそうだった。以下にサンプルと利用方法をメモ。

Notyf

公式サイト

https://carlosroso.com/notyf/

GitHub

https://github.com/caroso1222/notyf

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdnjs.cloudflare.com/ajax/libs/notyf/3.10.0/notyf.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/notyf/3.10.0/notyf.min.css">

異なるバージョンを利用したい場合は以下から探す。

https://cdnjs.com/libraries/notyf

サンプル

https://taitan916.info/sample/Notyf/

利用方法

ソースコード

<script>
//通常の通知
const option = {
    duration: 0, //表示秒数をミリ秒で指定(0にすると非表示にならない)
    dismissible: true, //閉じるボタンの表示
    position: {x:'right', y:'top'}, //表示位置
    types: [ //カスタム通知用の設定
        {
            type: 'custom',
            background: '#4169e1',
            icon: {
                className: 'fa-solid fa-house',
                tagName: 'i',
                color: '#fff'
            }
        }
    ]
};
const notyf = new Notyf(option);

//通常の通知
notyf.error(`error通知`);
notyf.success(`success通知`);

//カスタム通知
notyf.open({
    type: 'custom',
    message: 'カスタム通知<br>改行',
});
</script>

解説等

通常の通知

通常の通知については以下構文で実行できる。

notyf.【通知レベル(error等)】(`【本文】`);

カスタム通知

カスタム通知について基本的にはこちらのページを参照すること。

また、サンプルページの場合Font Awesomeのアイコンを使用しているためCSSをCDN呼び出しした上で、アイコンのclassを「className: fa-solid fa-house」と指定している。

通知部分の横幅

通知部分の横幅(width)についてmax-widthは指定されているがmin-widthは指定されていない。そのため通知本文が短い場合は表示横幅が異なる場合があり見た目的に微妙かも。

そこが気になる場合は以下のようにCSSで指定すること。

<style>
.notyf__toast{
    min-width: 300px;
}
</style>

オプション項目

各種オプション設定についてはこちらのページを参照すること。