Programing Language/React.js

React) react-toastify 중복 실행 방지하기

Jude_Song 2023. 3. 12. 17:05
728x90
반응형
import { ToastContainer, toast } from 'react-toastify';

const autoCloseDuration = 1000;
const toastId = 'current-toast-id'; // <- 고정값 id 지정

export const showToast = (msg: string) => {
  if(!toast.isActive(toastId)){ //isActive로 활성여부 체크
    // 중복 실행 방지하기 위해서 고정된 id를 넣는다.
    toast(msg, {
      toastId: toastId,
      position: 'bottom-center',
      autoClose: autoCloseDuration,
      hideProgressBar: true,
      closeButton: false,
      pauseOnHover: true,
      progress: undefined,
      theme: 'dark'
    });
  }
};

export const Toast = () => {
  return (
    <ToastContainer limit={1} />
  );

};

 

참고 https://fkhadra.github.io/react-toastify/prevent-duplicate/

728x90
반응형