[reast] react-toastify 사용법

react toast 메시지 사용법

 

 react, toast 라이브러리,

react-toastify 사용법 입니다.

 

화면 구현

toast 에러 메시지

 

toast 성공 메시지

 

react-toastify

https://www.npmjs.com/package/react-toastify

react-toastify

 

react-toastify 설치

npm i react-toastify

 

react-toastify import

import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

 

코드

const Info = () => {
  const onSubmitData = (e) => {
    e.preventDefault();
    if (...) { //error일 경우
      toast.error("수정된 항목이 없습니다", {
        autoClose: 3000,
        position: toast.POSITION.TOP_RIGHT
      });
    } else {
      toast.success("정보가 수정되었습니다", {
        autoClose: 3000,
        position: toast.POSITION.TOP_RIGHT
      });
    }
  }

  return ( 
  	<>
   		....
   	 	<ToastContainer / > //toast container ui
    </>
  );
};

export default Info;