[React] React-Toastify Custom 하기

나는 프론트엔드 개발을 하면서 사용자에게 Error를 보여줄 때 Toast 를 자주 사용하는 편이다.React에서는 이러한 Toast 를 react-toastify 라는 라이브러리를 이용해서 손쉽게 구현 할 수 있다.

Install

$ npm install --save react-toastify
$ yarn add react-toastify

Container

먼저 아래와 같이 ToastContainer를 만들어준다.
css파일을 불러와 적용시켜준 뒤, 원하는대로 커스텀해준다.

import styled from '@emotion/styled';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const Container = styled(ToastContainer)`
  width: 100% !important;
  display: flex;
  justify-content: center;

  .Toastify__toast {
    max-width: 100%;
    border-radius: 10px;
    padding: 24px;
  }

  // success
  .Toastify__toast--success {
  }

  // error
  .Toastify__toast--error {
  }

  // info
  .Toastify__toast--info {
  }

  .Toastify__close-button {
    display: none;
  }
`;

export default function CustomToastContainer() {
  // Container option을 props로 넘겨준다.
  return <Container position="bottom-center" autoClose={2000} hideProgressBar limit={1} />;
}

Main.tsx

위에서 만든 ToastContainer 를 프로젝트 root에 위치시켜준다.

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
  	<App />
   	<CustomToastContainer />
  </React.StrictMode>,
);

Toast.ts

나는 만들어준 Toast 를 좀 더 편하게 사용하기 위해서 아래와 같이 Toast.ts 라는 utils 파일을 만들어 주었다.

import { ToastPosition, toast } from 'react-toastify';

type ToastType = {
  position?: ToastPosition;
  autoClose?: number;
  hideProgressBar?: boolean;
  closeOnClick?: boolean;
  pauseOnHover?: boolean;
  draggable?: boolean;
  progress?: number;
};

//  toast fire
export const Toast = {
  success: (message: React.ReactNode, options: ToastType = {}) => {
    toast.success(message, { ...options });
  },
  error: (message: React.ReactNode, options: ToastType = {}) => {
    toast.error(message, { ...options });
  },
  info: (message: React.ReactNode, options: ToastType = {}) => {
    toast.info(message, { ...options, icon: false });
  },
};

Try

만들어준 Toast 는 아래와 같이 사용할 수 있으며 때에 따라 원하는 옵션을 넣어주면 된다.

Toast.success('Success Message', { // options });
Toast.error('Error Message', { // options });
Toast.info('Toast Message', { // options });