Maeng Design

Toast

Maeng Design의 Toast 컴포넌트는 사용자 작업에 대한 응답을 메시지 형태로 표시합니다.

Type

success, error, warning 3가지의 type이 존재합니다.
import React from 'react';
import { useToast } from 'maeng-design';

const App = () => {
  const toast = useToast();
  return (
    <div>
      <Button type="outline" color="green6" onClick={() => toast.success('성공 메시지')}>
        Success 메세지
      </Button>
      <Button type="outline" color="red6" onClick={() => toast.error('에러 메시지')}>
        Error 메세지
      </Button>
      <Button type="outline" color="yellow6" onClick={() => toast.warning('경고 메시지')}>
        Warning 메세지
      </Button>
    </div>
  );
};

API

toast 메서드의 인자 값으로 다양한 토스트 메시지를 생성하고 컨트롤 할 수 있습니다.
  • toast.success(message, duration, onClose, className)
  • toast.error(message, duration, onClose, className)
  • toast.warning(message, duration, onClose, className)
PropertyDescriptionTypedefault
message토스트 메시지 내용을 지정할 수 있습니다.String-
duration토스트 메시지가 사라질 때까지의 지속 시간을 지정합니다.Number3000
onClose토스트 메시지가 닫힐 때 호출될 함수 지정합니다.() => void-
className토스트 메시지 컴포넌트에 class 속성을 부여할 수 있습니다.String-
Made by Maeng