【React】お知らせ・成功・警告のアラート表示を実装できるライブラリ「react-alert」

今後使いたいライブラリを見つけたので備忘録としてまとめ。
「react-alert」という React のライブラリで、お洒落なアラート表示を実装することができます。

GitHub のページはこちらから。

GitHub – schiehll/react-alert: alerts for React
https://github.com/schiehll/react-alert

デモページへのリンクもあるので、そちらでどのような見た目になるのかご確認ください。

実装方法ですが、まずライブラリを下記のコマンドでインストールします。

npm install react-alert react-alert-template-basic --save

react-alert だけでなく react-alert-template-basic というライブラリも必要なのでお忘れなく！
インストールが完了したら、まず index.js を開き、下記のように修正します。

import React from 'react'
import { render } from 'react-dom'
import { transitions, positions, Provider as AlertProvider } from 'react-alert'
import AlertTemplate from 'react-alert-template-basic'
import App from './App'

// optional configuration
const options = {
  timeout: 5000,
  position: positions.BOTTOM_CENTER,
}

const Root = () => (
  <AlertProvider template={AlertTemplate} {...options}>
    <App />
  </AlertProvider>
)

render(<Root />, document.getElementById('root'))

ポイントは、3行目 でインポートした AlertProvider で表示する App コンポーネントを囲むことです。
また、この時に、アラートの表示位置や自動で消える時間等を指定することができます。

上記を追加したら、実際にアラートを表示したいページを下記のように修正します。
サンプルコードでは App.js ファイルです。

import React from 'react'
import { useAlert } from 'react-alert'

const App = () => {
  const alert = useAlert()

  return (
    <button onClick={() => { alert.show('[アラートに表示したいメッセージ]') }}>
      Show Alert
    </button>
  );
}
export default App

2行目で useAlert をインポートし、5行目でこちらを使用できるように宣言します。
あとは任意のタイミング、今回は 8行目にある通り、ボタンをクリックしたタイミングでアラートを表示します。

なお、表示出来るアラートも種類があり、下記の 4つが使用できます。

• alert.show();
• alert.info();
• alert.success();
• alert.error();

また、コード上からアラートを非表示にすることもでき、それには下記の記述を使用します。

// 指定したアラートを非表示に
alert.remove([消したいアラート]);
// 全てのアラートを非表示に
alert.removeAll();

が、アラートは指定した時間で自動的に消えるので、非表示にする処理は余程のことがなければ使わないかなと思います。

現在開発中のアプリに導入するかは分かりませんが…今後使えそうなので、頭の片隅ででも覚えておきたいと思います。

以上、React でアラート表示を実行できるライブラリ「react-alert」のご紹介でした。
ご参考になれば幸いです。