목표

• react-toastify 설치 및 실행
• toast 메세지 css custom

설치

먼저 react-toastify를 설치하자.

$ npm install --save react-toastify
// 또는
$ yarn add react-toastify

실행

react-toastify를 실행하기위해선 ToastContainer 컴포넌트를 toast 메세지를 보여주고싶은 곳에 위치시키면되는데, root단에 위치시키는것이 권장된다.

위와같이 root단에 ToastContainer를 위치시키면된다.

이제 ToastContainer의 기본css불러와야한다.

css를 불러오지 않으면 css가 적용되지않은 text만 위치될뿐이다.

예를 들어 css를 불러오지않은채 아래처럼 toast 메세지를 dispatch한다면

toast('css적용안됨!')

아래와같이 css가 적용되지않은 plain text만 위치시킨곳에 나타나게된다.

이제 css를 root단에서 불러온후 다시 toast 메세지를 dispath하면

toast("css적용됨!")

react-toastify 기본css가 적용되어 아래와같이 예쁘게 나타나는것을 확인할 수 있다.

스타일 커스텀

필자는 emotion을 사용하고있어 emotion을 기준으로 설명하겠다.
(Styled-component의 경우도 비슷하다)

react-toastify에서 지원하는 css class는 아래 링크에서 확인할 수 있다.
https://fkhadra.github.io/react-toastify/how-to-style/#override-existing-css-classes

간단하게 배경과 글자색만 바꿔보겠다.

// Toast.tsx
export const StyledToastContainer = styled(ToastContainer)`
  margin-top: 60px;
  .Toastify__toast {
    background-color: black;
    color: white;
  }
`

// root단의 app.tsx
<StyledToastContainer
  position="top-center"
  autoClose={3000}
  hideProgressBar={true}
  closeOnClick={true}
  pauseOnHover={false}
  limit={1}
/>
`;

위와같이 Style을 덮어쓴 ToastConatiner를 위치시키면 아래와같이 custom style된 toast 메세지를 볼 수 있다.

이제 못생긴 코드를 다듬고, info, success, error 상황에 맞춰서 다른 UI를 보여주기위해 코드를 하면 아래와같다.

// Toast.ts
export const StyledToastConatiner = styled(ReactToastContainer)`
  margin-top: 60px;
  .Toastify__toast {
    background-color: ${primary.blue};
    color: ${white};
  }
  .Toastify__toast--info {
    border: 1px solid transparent;
  }
  .Toastify__toast--success {
    border: 1px solid ${green.green3};
  }
  .Toastify__toast--error {
    border: 1px solid ${red.red4};
  }
`;

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

export const Toast = {
  info: (message: ReactNode, options: ToastOptions = {}) => {
    toast.info(message, { ...defaultToastOption, icon: <Icon name="cart" stroke={white} />, ...options });
  },
  success: (message: ReactNode, options: ToastOptions = {}) => {
    toast.success(message, { ...defaultToastOption, icon: <Icon name="check-circle" stroke={white} />, ...options });
  },
  error: (message: ReactNode, options: ToastOptions = {}) => {
    toast.error(message, { ...defaultToastOption, icon: <Icon name="alert-triangle" stroke={white} />, ...options });
  },
};

// root단의 app.tsx에 ToastContainer 위치시킴
 <StyledToastConatiner limit={1} />

//toast message실행
Toast.info('커스텀 완성!');