Sonner 토스트

Sonner은 React용으로 만들어진 토스트(알림) 컴포넌트 라이브러리예요. 단순하면서도 예쁜 기본 스타일을 갖추고 있어서, 별다른 설정 없이도 바로 사용할 수 있어요. shadcn/ui에서는 Sonner을 감싼 컴포넌트를 기본 제공하니까, 설치만 하면 바로 토스트를 띄울 수 있답니다.

출처: 문서

본문

소개

Sonner은 emilkowalski_가 만들고 유지보수하고 있어요.

설치하기

CLI Manual

다음 명령어를 실행해 주세요.

npx shadcn@latest add sonner

Toaster 컴포넌트를 추가해 주세요.

루트 레이아웃에 <Toaster />를 넣어 주세요. 그러면 어디서든 토스트를 띄울 수 있어요.

import { Toaster } from "@/components/ui/sonner"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

다음 의존성을 설치해 주세요.

npm install sonner next-themes

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

Toaster 컴포넌트를 추가해 주세요.

import { Toaster } from "@/components/ui/sonner"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

사용하기

toast 함수를 import 해서 호출하면 그 자리에서 토스트가 떠요.

import { toast } from "sonner"

toast("Event has been created.")

더 알아보기 (Learn more)

Sonner — Sonner 공식 문서