설치
npm install notistack
예시 코드
src / app / layout.tsx
import ClientSnackbarProvider from "@/lib/ClientSnackbarProvider";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ko">
<body>
<ClientSnackbarProvider />
{children}
</body>
</html>
);
}
src / lib / ClientSnackbarProvider.tsx
"use client";
import { enqueueSnackbar, SnackbarProvider } from "notistack";
const ClientSnackbarProvider = () => {
return (
<>
<SnackbarProvider
maxSnack={3} // 최대 누적 스택
autoHideDuration={5000} // 지속시간
// anchorOrigin={{ vertical: "bottom", horizontal: "left" }} // 스낵바 위치 지정
// preventDuplicate={true} // 중복 메시지 표시 여부
// hideIconVariant = {false} // 아이콘 숨김 여부
// transitionDuration={{enter:300, exit:3000}} // 애니메이션 시간 변경 (ms)
/>
<button onClick={() => enqueueSnackbar("스낵바 테스트 문구")}>기본 스낵바 추가</button>
<button
onClick={() =>
enqueueSnackbar("스낵바 테스트 문구", {
// 'default' | 'error' | 'warning' | 'info' | 'success'
// variant: "default",
variant: "info",
// variant: "success",
// variant: "warning",
// variant: "error",
})
}
>
variant 지정 스낵바 추가
</button>
</>
);
};
export default ClientSnackbarProvider;
https://github.com/iamhosseindhv/notistack?tab=readme-ov-file
GitHub - iamhosseindhv/notistack: Highly customizable notification snackbars (toasts) that can be stacked on top of each other
Highly customizable notification snackbars (toasts) that can be stacked on top of each other - iamhosseindhv/notistack
github.com
https://notistack.com/api-reference
Notistack: Show feedback to your users with a call of a function
Notistack is a React library which makes it super easy to display notifications on your web apps. It is highly customizable and allows you to stack snackbars/toasts on top of one another
notistack.com
'라이브러리 > MUI' 카테고리의 다른 글
| [MUI] <Drawer/> 애니메이션 버그 해결 방법 | MUI <Drawer /> 애니메이션이 적용되지 않는 이유 (0) | 2025.03.18 |
|---|---|
| [MUI] MUI icons 아이콘 컴포넌트 props로 전달받기 | MUI 아이콘 프롭스 타입 정의 방법 (0) | 2025.03.04 |
| [MUI] 아코디언 <Accordion/> 기본 그림자(box-shadow) 제거 (0) | 2025.03.03 |
| [MUI] Drawer 테두리 둥글게 변경하기 (0) | 2025.02.21 |
| [MUI] <Select /> 기본 스타일링 (0) | 2025.02.06 |
