[React-toastify] リンクボタンを埋め込んだ通知(トースト)を作る。

今回はReact-toastifyを使っていきます。

react-toastify

多機能かつかなり使いやすいライブラリです。
ドキュメントもわかりやすく、デモできるのもありがたいですね。

それでは、実装していきましょう。

とりあえずReact-tostifyを動かす。

$ yarn add react-toastify

ルートコンポーネント

import 'react-toastify/dist/ReactToastify.css';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} id="modalId" />
      <ToastContainer />
    </>
  );
}

ChildComponent.tsx

ChildComponent.tsx

import { toast } from 'react-toastify';

const ChildComponent = () => {
  const notify = () => toast('トーストだよ。')

	return (
    <button onClick={notify}>ボタン</button>
  )
}

export default ChildComponent 

とりあえずこんな感じで動きます。

この書き方の場合、どのコンポーネントからでもトーストを呼び出せる利点はあります。一方、ページ遷移をした際にもトーストが残るので、その挙動が嫌な場合は調整が必要になります。ページ遷移に合わせてtoast.dismiss()をしてあげるとトーストが残らなくなります。

toastに文字列ではなく、コンポーネントを渡してリンクさせる。

上記の例では、toastの引数に文字列を渡しましたが、コンポーネントを渡すこともできます。

なので、渡したコンポーネント内でリンクを書いてあげればOKです。

import { toast } from 'react-toastify';

const ChildComponent = () => {
  const notify = () => toast(LinkComponent)

	return (
    <button onClick={notify}>ボタン</button>
  )
}

export default ChildComponent

const LinkComponent = () => {
	<a href="/">リンク</a>
}

簡単ですね。