react-toastify

react-toastify

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

react-toastify

• 리액트에서 toast 알림을 편하게 띄우게 할 수 있는 3rd party 라이브러리이다!
• 아래 명령어로 설치를 하자!

yarn add react-toastify

사용법

• 우선 react-toastify의 css를 적용하기 위해 아래처럼 임포트 해야 한다.

import 'react-toastify/dist/ReactToastify.css';

• <ToastContainer/> 컴포넌트를 불러온 후 이벤트에 toast() 메서드를 이용해서 toast 알림을 편하게 띄울 수 있다!

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

const App = () => {

  const showToast = () => {
    toast("Toast 메시지");
  }

  return(
    <div>
      <button onClick={showToast}>toast 메시지</button>
      <ToastContainer />
    </div>
  )
}

export default App;

 

• 기본적인 toast 알림 이외에도 toast.success(), toast.error()로 상황에 맞는 toast 알림을 띄울 수 있다!

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

const App = () => {

  const showSuccessToast = () => {
    toast.success("Toast Succes 메시지");
  }

  const showErrorToast = () => {
    toast.error("Toast Error 메시지");
  }

  return(
    <div>
      <button onClick={showSuccessToast}>Toast Success</button>
      <button onClick={showErrorToast}>Toast Error</button>
      <ToastContainer />
    </div>
  )
}

export default App;

 

Toast속성들

• toast(), toast.success(), toast.error()의 두번째 인자로 json 형태로 position, autoClose, hideProgressBar, closeOnClick, pauseOnHover, draggable등의 속성에 값을 지정해서 넘겨줄 수 있다.

속성

• position: toast 알림이 보일 위치. default는 top-right
• autoClose: toast 알림이 자동으로 닫히는 시간을 설정해줄 수 있다. false로 설정하면 자동으로 닫히지 않는다!
• closeOnClick: toast 알림의 닫는 버튼 이외에 다른 부분을 클릭하면 닫히는지 설정할 수 있다. default는 false
• pauseOnHover: toast 알림에 마우스를 올렸을 때 자동으로 닫히는 시간을 멈추게 함. default는 true
• draggable: toast 알림을 드래그해서 움직일 수 있게 설정할 수 있다. default는 true이다.

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

const App = () => {

  const showSuccessToast = () => {
    toast.success("Toast Succes 메시지",{
      position: "top-center",
      closeOnClick: false,
      pauseOnHover: true,
      draggable: false,
    });
  }

  return(
    <div>
      <button onClick={showSuccessToast}>Toast Success</button>
      <ToastContainer />
    </div>
  )
}

export default App;