Chakra UI v3のトーストの使い方

概要

Chakra UI v3からトーストの使い方が大きく変わり、実装するのに苦労したので備忘録として紹介します。

参考

公式ドキュメント
https://www.chakra-ui.com/docs/components/toast

手順

1. npx @chakra-ui/cli snippet add toasterでtoasterスニペットを追加（私の環境ではnpmでインストールを実行）

2. プロジェクトのルートコンポーネントにimport { Toaster } from "@/components/ui/toaster"と<Toaster />を記述しレンダリングする

   // <例>
   import { Box } from '@chakra-ui/react';
   import { Router } from './router/Router';
   import { BrowserRouter } from 'react-router-dom';
   import { Toaster } from "@/components/ui/toaster"; // インポート
   
   function App() {
   
     return (
       <Box bg="gray.100" color="gray.800" height="100vh">
         <BrowserRouter>
           <Toaster /> // Toasterをレンダリング
           <Router />
         </BrowserRouter>
       </Box>
     )
   }
   
   export default App
   

3. ボタンコンポーネントファイルにimport { toaster } from "@/components/ui/toaster"を記述し、onClickにtoaster.createの設定を記述する

   // 例
   "use client"
   
   import { Button } from "@chakra-ui/react"
   import { toaster } from "@/components/ui/toaster" // インポート
   
   const Demo = () => {
     return (
         <Button
           size="sm"
           variant="outline"
           onClick={() =>
             toaster.create({
               title: `Toast status is success`, // トースターのメッセージ
               type: "success", // トースターの見た目のタイプ指定
             })
           }
         >
           success
         </Button>
     )
   }
   

画面右下にスクショのようなトースターが表示されればOK

トースターの表示位置のカスタマイズ

デフォルトではトースターの表示は画面右下になります

画面の真上にカスタマイズしたい場合の例を紹介します

手順：

1. src/components/ui/toaster.tsxを開く

2. placementをデフォルトのbottom-endからtopに変更

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

3. ヘッダーがある場合は、ヘッダーにトーストが隠れる可能性があるのでzIndexのstyleを付与する

   export const Toaster = () => {
     return (
       <Portal>
   -      <ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
   +      <ChakraToaster toaster={toaster} style={{ zIndex: 9999 }} insetInline={{ mdDown: "4" }}>
   

画面の真上にトーストの表示をカスタマイズすることが出来た

まとめ

Chakra UI v3のトーストは以前のuseToastを使った実装法と大きく変わっており、公式ドキュメントを見ながら試行錯誤して実装しました。

しばらくChakra UI v3の変更点でつまずくシーンは多くなりそうですが、公式ドキュメントの読解力も上げていきたいです。