React-toastify 사용하기

 

평소 웹사이트를 이용하다 보면 사용자들이 무슨 액션을 취했는지 조그마한 팝업창으로 알려주는 창이 나오게 됩니다. 이 창을 토스트 창이라고 부른다고 합니다. React에서는 React-toastify라는 라이브러리로 멋진 알림창을 만들 수 있다고 합니다.

1. 설치하기

yarn add react-toastify

로 설치해줍니다.

2. import 해주기

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

사용하고자 하는 컴포넌트 파일 위에 import 해준다.

3. 사용하기

const notify = () => toast.success('alert')
const notify1 = (parameter) => toast.success(`%{parameter}`)

적용할 컴포넌트에 알림창을 띄울 함수를 정의해줍니다.

백틱을 이용해서 파라미터를 넣어줄 수 있습니다.

success말고도 다른 옵션도 많습니다.

 

<ToastContainer
    position="top-center"
    autoClose={3000}
    hideProgressBar={false}
    newestOnTop={false}
    closeOnClick
    rtl={false}
    pauseOnFocusLoss
    draggable
    pauseOnHover
    theme="light"
/>

ToastContainer 는 띄워지는 알림창입니다.

옵션들은

https://fkhadra.github.io/react-toastify/introduction

React-toastify | React-Toastify

이곳에서 더많은 옵션을 알아볼 수 있습니다.