通知

1import React from 'react';
2import toast from 'react-hot-toast';
3import Button from '../components/button';
4
5const Toast = () => {
6  const saveData = () => {
7    return new Promise((resolve) => {
8      setTimeout(() => {
9        resolve('foo');
10      }, 3000);
11    });
12  };
13
14  return (
15    <div className="flex flex-wrap gap-4">
16      <Button onClick={() => toast('通知')}>通知</Button>
17      <Button onClick={() => toast.success('成功')}>成功</Button>
18      <Button onClick={() => toast.error('エラー')}>エラー</Button>
19      <Button
20        onClick={() =>
21          toast.promise(saveData(), {
22            loading: '保存中...',
23            success: '保存成功',
24            error: 'エラーが発生しました',
25          })
26        }
27      >
28        ローディング
29      </Button>
30    </div>
31  );
32};
33
34export default Toast;