Zenn
Closed5

React: Toast表示 - toastifyを使って

CaaaaatsCaaaaats

上記のように遷移時にもトースト表示させたい場合は_app.tsxに実装する

import 'react-toastify/dist/ReactToastify.css';
import { ToastContainer, Zoom } from 'react-toastify';

function MyApp({ Component, pageProps }: AppProps) {

  return (
    <ThemeProvider attribute='class'>
      <RecoilRoot>
        <Auth>
          <>
            <ToastContainer/>
            <Component {...pageProps} />
          </>
        </Auth>
      </RecoilRoot>
    </ThemeProvider>
  );
}
export default MyApp;

カスタマイズするとこんな感じ↓
（公式参照）

import 'react-toastify/dist/ReactToastify.css';
import { ToastContainer, Zoom } from 'react-toastify';

const contextClass = {
  success: 'bg-blue-600',
  error: 'bg-red-600',
  info: 'bg-gray-700',
  warning: 'bg-orange-400',
  default: 'bg-black text-white ',
  dark: 'bg-white text-gray-600',
};

function MyApp({ Component, pageProps }: AppProps) {

  return (
    <ThemeProvider attribute='class'>
      <RecoilRoot>
        <Auth>
          <>
            <ToastContainer
              position='bottom-right'
              autoClose={3000}
              hideProgressBar={true}
              newestOnTop={false}
              closeOnClick
              rtl={false}
              pauseOnFocusLoss
              draggable
              pauseOnHover
              transition={Zoom}
              closeButton={false}
              toastClassName={() =>
                // contextClass[(theme == 'light'? 'default': 'info')] +
                contextClass['info'] +
                ' relative flex p-1 min-h-10 rounded-md justify-between m-2 cursor-pointer'
              }
              bodyClassName={() => ' flex  text-sm font-md block p-3'}
            />
            <Component {...pageProps} />
          </>
        </Auth>
      </RecoilRoot>
    </ThemeProvider>
  );
}
export default MyApp;
CaaaaatsCaaaaats

ビューは共通化して設定したので、あとは表示させたいコンポーネントでtoastの実装

import { toast } from 'react-toastify';

const completeSignup = async (): Promise<void> => {
    setIsOnboarding(false);
    try {
      toast.success('新規登録が成功しました！');
      await router.push('/community');
      console.log('complete signup resolved!');
    } catch {
      (error: any) => console.error(error);
    }
  };
このスクラップは2021/11/12にクローズされました