Chakra UI v3 でトースト（Toast）表示する方法

はじめに

UdemyのReact講座で学習していますが、React や Chakra UI のバージョンが新しくなっているため、動画の説明どおりに実装できない場面が増えてきました。そのため公式ドキュメントを調べたり、ChatGPTに質問したりしながら、現行バージョンに合わせて試行錯誤しています。

今回は Chakra UI v3のトースト（Toast）表示について、公式ドキュメントを読んでも少し分かりにくかった点を、自分なりに整理してまとめてみました。

Udemy動画はこちらです。

前提条件

• macOS (M1)
• React v19 + TypeScript
• Chakra UI v3 インストール済み
• Chakra UI のスニペット追加済み

npx @chakra-ui/cli snippet add

トーストの表示方法

スニペットを追加すると、以下のような toaster.tsx というファイルが生成されていると思います。

src/components/ui/toaster.tsx

"use client"

import {
  Toaster as ChakraToaster,
  Portal,
  Spinner,
  Stack,
  Toast,
  createToaster,
} from "@chakra-ui/react"

export const toaster = createToaster({
  placement: "bottom-end",
  pauseOnPageIdle: true,
})

export const Toaster = () => {
  return (
    <Portal>
      <ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
        {(toast) => (
          <Toast.Root width={{ md: "sm" }}>
            {toast.type === "loading" ? (
              <Spinner size="sm" color="blue.solid" />
            ) : (
              <Toast.Indicator />
            )}
            <Stack gap="1" flex="1" maxWidth="100%">
              {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
              {toast.description && (
                <Toast.Description>{toast.description}</Toast.Description>
              )}
            </Stack>
            {toast.action && (
              <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
            )}
            {toast.closable && <Toast.CloseTrigger />}
          </Toast.Root>
        )}
      </ChakraToaster>
    </Portal>
  )
}

App.tsxに <Toaster /> を追加する

この <Toaster /> をどこかに書いておかないと、トーストは表示されません。

App.tsx

import { Toaster } from "./components/ui/toaster";
import Demo from "./components/Demo";

function App() {
  return (
    <>
      <Router>
        {/* ルーティングなど */}
        <Route path="/demo" element={<Demo />}/>
      </Router>
      <Toaster />
    </>
  );
}

export default App;

トーストを発火させる

トーストを表示したいコンポーネント（今回は Demo.tsx ）で toaster.create() を呼び出します。

src/components/Demo.tsx

import { Button, Center } from "@chakra-ui/react";
import { toaster } from "./ui/toaster";

const Demo = () => {
  return (
    <Center minH="100vh">
      <Button
        bgColor="gray.600"
        _hover={{ opacity: 0.8 }}
        onClick={() => {
          toaster.create({
            title: "Demo Toast",
            description: "This is a Toast",
            type: "success",
            closable: true,
          });
        }}
      >
        Click me
      </Button>
    </Center>
  );
};

export default Demo;

これでボタンをクリックすると、以下のようなトーストが表示されます。

トーストの表示位置を変更する

トーストの表示場所は、toaster.tsx の createToaster で設定することができます。
上のスクリーンショット画像は、表示位置をtop、offsetsを100pxに設定したものです。

toaster.tsx

export const toaster = createToaster({
  placement: "top",
  offsets: "100px",
  pauseOnPageIdle: true,
})

• placement : 表示位置(top / bottom-end など)
• offsets : 画面端からの余白

トーストの表示内容をカスタマイズする

トーストの内容や挙動は toaster.create() の引数で指定します。

toaster.create({
    title: "Demo Toast",
    description: "This is a Toast",
    type: "success",
    closable: true,
    duration: 5000,
});

主なオプション

• type
  • success
  • info
  • error
  • warning
  • loading （永続的なトースト）
• duration : 表示時間（ミリ秒）
• closable : 閉じるボタンの表示

まとめ

Chakra UI v3 のトースト表示は、以下の3点を押さえれば動きます。

• App.tsx に <Toaster /> を追加する
• トーストを出したい場所で、toaster.create()を呼ぶ
• 見た目や挙動は toaster.tsx と toaster.create() で調整

公式ドキュメントには、他にもカスタマイズ例があるので、必要に応じて確認してみてください。

参考

Chakra UI 公式ドキュメント