chakra ui v3 で注意すべきこと

はじめに

chakra ui を使って画面を作成しているときにドキュメントが古く、混乱することが多くあったので忘備録です。

モーダルなくなった

モーダルがなくなりました。本当です。v2 までは Modal や ModalOverlay を import を使ってコンポーネントを追加していましたが v3 ではこれらのコンポーネントはすべてありません。

// v2 ONLY
import {
 Modal,
 ModalOverlay,
 ModalContent,
 ModalHeader,
 ModalFooter,
 ModalBody,
 ModalCloseButton,
} from '@chakra-ui/react

代替は Dialog を使うようです。ナンテコッタ。

URL: https://github.com/chakra-ui/chakra-ui/issues/8987

モーダルの開閉は useDisclosure を使わない 

モーダルを開くには <DialogTrigger></DialogTrigger> でボタンを囲う必要があります。モーダルを閉じるには <DialogActionTrigger></DialogActionTrigger> でボタンを囲う必要があります。

ChakraProvider はなくなった

正確には Provider の内部で ChakraProvider を呼び出すようになりました。

import { Provider } from "@/components/ui/provider"
import { defaultSystem } from "@chakra-ui/react"

export const App = ({ Component }) => (
  <Provider value={defaultSystem}>
    <Component />
  </Provider>
)

スニペット

プレビルドしたスニペットが src/components/ui ディレクトリに配置されます。@/components とドキュメントにあるのですが、一寸よくわからず「サンプルだから適当なパスなんだろうなー」と思ってしまいます。

スニペットは

npx @chakra-ui/cli snippet add

を実行すことで追加できます。パスは src/components です。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼