[react-toastify] custom toast 사용하기

https://fkhadra.github.io/react-toastify/how-to-style/

How to style | React-Toastify

 

위 사이트를 참고해 toast의 스타일을 커스텀하게 작성해 보았다

 

커스텀 스타일 작성

일단 styled-components를 사용해 원하는 스타일을 만들어준다

위 사이트에 원하는 속성을 검색하면 클래스 명을 찾을 수 있다

export const StyledToastConatiner = styled(ToastContainer)`
  margin-right: 40px;

  .Toastify__toast {
    display: flex;
    align-items: center;
    width: 300px;
    padding: 10px 16px;

    background: rgba(46, 49, 50, 1);
    border-radius: 10px;
    
    color: rgba(239, 241, 241, 1);
    font-size: 14px;
  }

  .Toastify__toast-body {
    margin: 0;
    padding: 0;
  }

  .Toastify__toast--success {
    border-left: 5px solid rgba(0, 91, 190, 1);
  }

  .Toastify__progress-bar--success {
    background: transparent;
  }

  .Toastify__toast--error {
    border-left: 5px solid rgba(186, 26, 26, 1);
  }

  .Toastify__progress-bar--error {
    background: transparent;
  }

  .Toastify__close-button {
    color: rgba(255, 255, 255, 1);
    opacity: 1;
    align-self: auto;
    width: 24px;
    height: 24px;
  }

  .Toastify__close-button > svg {
    width: 24px;
    height: 24px;
  }
`;

toast.success 상태와 toast.error 상태를 분리해 스타일을 작성하였다

 

toast option 작성

const defaultToastOption = {
  position: 'top-center',
  autoClose: 3000,
  hideProgressBar: false,
  closeOnClick: true,
  pauseOnHover: true,
  draggable: true,
};

export const Toast = {
  success: (message) => {
    toast.success(message, {
      ...defaultToastOption,
    });
  },
  error: (message) => {
    toast.error(message, {
      ...defaultToastOption,
    });
  },
};

원하는 토스트 옵션들을 작성한 후 토스트 속성에 넣어준다

 

실행

전역으로 실행하기 위해 프로젝트 최 상단에 만들어둔 StyledToastConatiner를 위치시킨다

스타일 파일도 추가되어 있어야 한다. import 'react-toastify/dist/ReactToastify.css'; 

// App.js

return (
  <>
    <ThemeProvider theme={theme}>
       <StyledToastConatiner icon={false} />
     ...
  </>
 );