-
React) react-toastify 중복 실행 방지하기Programing Language/React.js 2023. 3. 12. 17:05728x90반응형
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반응형'Programing Language > React.js' 카테고리의 다른 글
React) Nginx + React (SUB-PATH)로 배포하기 (0) 2022.12.09 Recoil) Atom Effects에서 isReset 값 false 로 실행하기 (0) 2022.11.15 Recoil) Expectation Violation: Duplicate atom key "". This is a FATAL ERROR in 해결하기 (0) 2022.11.14 NextJS ) next js websocket.js?a9be:45 WebSocket connection to (0) 2022.09.29 React) 브라우저의 변하는 width, height를 Hook으로 전달받기 (0) 2022.06.23