Snackbar

Snackbar.Provider と useSnackbar によるトースト通知。Viewport 内に Root を描画してメッセージを表示します。

参考: Material Design 3 公式ガイドライン m3.material.io/components/snackbar/overview

Import

import { Snackbar, useSnackbar, Button, ThemeProvider } from '@m3-baseui/react-tailwind';

使用例

function App() {
  return (
    <ThemeProvider seed="#6750A4">
      <Snackbar.Provider>
        <SnackbarDemo />
      </Snackbar.Provider>
    </ThemeProvider>
  );
}

function SnackbarList() {
  const { toasts } = useSnackbar();
  return (
    <>
      {toasts.map((toast) => (
        <Snackbar.Root key={toast.id} toast={toast}>
          <Snackbar.Content>
            <Snackbar.Title />
          </Snackbar.Content>
        </Snackbar.Root>
      ))}
    </>
  );
}

function SnackbarDemo() {
  const { add } = useSnackbar();
  return (
    <>
      <Button onClick={() => add({ title: '保存しました' })}>表示</Button>
      <Snackbar.Viewport>
        <SnackbarList />
      </Snackbar.Viewport>
    </>
  );
}

Props

Prop	型	既定値	説明
`add`	`(options) => void`	—	useSnackbar フックから取得

補足

Snackbar.Provider は ThemeProvider の内側に配置してください。