반응 토스트

Hello Guys 오늘은 "react-toastify"라는 매우 아름다운 react-library를 보여드리겠습니다.
이 라이브러리는 많은 속성으로 팝업 알림을 생성하는 데 사용되며 반응에서 조건부로 사용할 수 있습니다.
시작하자...

설치 -

 npm install --save react-toastify

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

거의 모든 프로젝트에서 사용할 수 있는 매우 멋진 알림 라이브러리이며 프로젝트를 설정하고 추가하는 데 매우 유용합니다.

용법 -

 import React from 'react';
  import { toast } from 'react-toastify';

  function Example() {
    const notify = () => {
      toast("Default Notification !");

      toast.success("Success Notification !", {
        position: toast.POSITION.TOP_CENTER
      });

      toast.error("Error Notification !", {
        position: toast.POSITION.TOP_LEFT
      });

      toast.warn("Warning Notification !", {
        position: toast.POSITION.BOTTOM_LEFT
      });

      toast.info("Info Notification !", {
        position: toast.POSITION.BOTTOM_CENTER
      });

      toast("Custom Style Notification with css class!", {
        position: toast.POSITION.BOTTOM_RIGHT,
        className: 'foo-bar'
      });
    };

    return <button onClick={notify}>Notify</button>;
  }

버튼을 클릭하면 알림 기능 내부의 모든 알림이 팝업됩니다. 오류, 성공, 경고, 기본값과 같은 여러 알림 토스트가 있음을 볼 수 있습니다. 이들은 제공되는 내장 스타일이므로 원하는 경우와 같은 조건에 따라 사용할 수 있습니다. 사용자에게 경고를 주면 toast.warn() 메서드를 사용할 수 있습니다.

position 속성은 알림을 화면에 배치하는 데 사용되며, toast.POSITION.BOTTOM_RIGHT -> 알림 알림이 화면 오른쪽 하단에 팝업됨을 의미합니다.

전체 정보는 위에서 제공한 링크의 설명서를 읽으십시오.

이것이 이번 포스트의 전부입니다.
이 게시물을 읽어 주셔서 감사합니다. 실수를 발견하거나 제안하고 싶은 경우 댓글 섹션에 언급하십시오.
^^ 아래 링크에서 기부로 저를 도울 수 있습니다 감사합니다👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

이 게시물도 확인하십시오.