Motile UI

Toast

화면에 일시적으로 표시되는 알림 메시지 컴포넌트입니다. Hook 기반으로 동작하며, default, success, error, warning, info 5가지 스타일을 제공합니다. ToastProvider로 앱을 감싸고 useToast hook으로 사용합니다. 모바일 최적화를 위해 768px 이하에서는 화면 중앙에 가득 차게 표시됩니다.

미리보기

사용법

1import { Button, useToast, ToastProvider } from "motile-ui";
2
3function App() {
4  const toast = useToast();
5
6  return (
7    <Button
8      variant="primary"
9      onClick={() => toast.show("기본 토스트 메시지입니다")}
10    >
11      Toast 표시
12    </Button>
13  );
14}
15
16// App을 ToastProvider로 감싸기
17export default function Root() {
18  return (
19    <ToastProvider>
20      <App />
21    </ToastProvider>
22  );
23}

API 레퍼런스

ToastProvider

Toast를 사용하기 위한 Context Provider 컴포넌트

속성타입기본값설명
childrenReact.ReactNode-자식 요소
zIndexnumber9999Toast container의 z-index 값

useToast()

Toast를 표시하기 위한 Hook (ToastProvider 내부에서 사용)

속성타입기본값설명
show(message: string, options?: ToastOptions) => string-기본 Toast를 표시하는 함수
success(message: string, options?: ToastOptions) => string-성공 Toast를 표시하는 함수
error(message: string, options?: ToastOptions) => string-에러 Toast를 표시하는 함수
warning(message: string, options?: ToastOptions) => string-경고 Toast를 표시하는 함수
info(message: string, options?: ToastOptions) => string-정보 Toast를 표시하는 함수

ToastOptions

Toast 옵션 객체

속성타입기본값설명
durationnumber4000Toast가 표시되는 시간 (밀리초)
zIndexnumber-개별 Toast의 z-index 값

예제

기본 Toast

1import { Button, useToast } from "motile-ui";
2
3export default function DefaultExample() {
4  const toast = useToast();
5
6  return (
7    <Button
8      variant="primary"
9      onClick={() => toast.show("기본 토스트 메시지입니다")}
10    >
11      Default Toast
12    </Button>
13  );
14}

Success Toast

1import { Button, useToast } from "motile-ui";
2
3export default function SuccessExample() {
4  const toast = useToast();
5
6  return (
7    <Button
8      variant="primary"
9      onClick={() => toast.success("성공적으로 완료되었습니다")}
10    >
11      Success Toast
12    </Button>
13  );
14}

Error Toast

1import { Button, useToast } from "motile-ui";
2
3export default function ErrorExample() {
4  const toast = useToast();
5
6  return (
7    <Button
8      variant="primary"
9      onClick={() => toast.error("오류가 발생했습니다")}
10    >
11      Error Toast
12    </Button>
13  );
14}

Warning Toast

1import { Button, useToast } from "motile-ui";
2
3export default function WarningExample() {
4  const toast = useToast();
5
6  return (
7    <Button
8      variant="primary"
9      onClick={() => toast.warning("경고 메시지입니다")}
10    >
11      Warning Toast
12    </Button>
13  );
14}

Info Toast

1import { Button, useToast } from "motile-ui";
2
3export default function InfoExample() {
4  const toast = useToast();
5
6  return (
7    <Button
8      variant="primary"
9      onClick={() => toast.info("정보 메시지입니다")}
10    >
11      Info Toast
12    </Button>
13  );
14}
Toast | Motile UI