react-toastify - custom toast 적용하기

toast가 필요한데, 얕은 지식으로 직접 만들지는 못했고 react-toastify 라이브러리를 사용했다.

이때 자체 제작한 component 를 사용해보자

 

install

yarn add react-toastify

 

ToastContainer 적용

import { ToastContainer } from 'react-toastify';

import 'style/toast.css';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <ToastContainer limit={1} />
    </>
  );
}

export default MyApp;

toast 하나만 띄울거라서 limit 1로 걸어줬다.

react-toastify에서 toast를 위한 css를 제공해 주는데, 거기에서 필요한 값부분만 가져와서 style/toast.css에 적용했다.

 

이렇게 하면 html 에 다음과 같이 적용이 된다.

toast 를 띄우게 되면 저 div안에 toast component가 들어간다.

 

toast.css

.Toastify--animate {
    animation-fill-mode: both;
    animation-duration: 0.7s;
}

.Toastify--animate-icon {
    animation-fill-mode: both;
    animation-duration: 0.3s;
}

@media only screen and (max-width : 480px) {
    .Toastify__toast {
        margin-bottom: 0;
        border-radius: 0;
    }
}
@keyframes Toastify__trackProgress {
    0% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(0);
    }
}

.Toastify__progress-bar--animated {
    animation: Toastify__trackProgress linear 1 forwards;
}

@keyframes Toastify__bounceOut {
    to {
        opacity: 0;
    }
}
@keyframes Toastify__bounceIn {
    to {
        opacity: 1;
    }
}

.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
    animation-name: Toastify__bounceIn;
}

.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
    animation-name: Toastify__bounceOut;
}

import 'react-toastify/dist/ReactToastify.css'; 이 파일에 있는 값들을 참고해서 내가 필요한 부분만 적용함.

기존 ReactToastify.css 에는 컬러나 크기 뿐만아니라

toast가 좌에서 우로, 우에서 좌로 등 toast자체가 움직이게 하는 애니메이션이 적용되어 있다.

나의 경우 단순히 뜨고 사라지는걸 원해서 opacity만 적용했다. 그리고 불필요한 css 부분은 다 제거함!

 

 

toast.tsx

import { toast } from 'react-toastify';

const ToastComponent = () => (
  <div>
    blabla~~
  </div>
);

export const Toast = () => toast(<ToastComponent />, { autoClose: 2000, hideProgressBar: true, progress: undefined });

 

submit을 하거나 한뒤 toast 를 띄우고 싶을때  

Toast(); 

로 사용하면 된다.