🙆

Chakra UI Tips 実装するにあたってかゆかったこと

2022/12/07に公開

サクサク実装できて超好きです。Tailwindと比較してごちゃごちゃしないのとtsで補完が効くのめっちゃいい。
ただ実装するにあたって「これどうしたら解決できるんだろう」「これはどうやって実装するんだろう」と思うことがいくつかあったので、書いてみる。

以下のドキュメントに従ってセットアップしたアプリケーションで実装＆動作確認。

yarn create react-app my-app --template @chakra-ui/typescript

コンポーネントをラップする

あらかじめスタイルをあてたコンポーネントを作りたいなと思ったらこれ。

例えば背景色を指定したInputはこんな感じ。

import { FC } from "react";
import { Input, InputProps } from "@chakra-ui/react";

export const CustomInput: FC<InputProps> = (props) => (
  <Input bg='#dedede' {...props} />
)

<コンポーネント名>Props というのが用意されているので、それを使うのが吉。
他のpropsも渡したくなったらこう。

export const CustomInputWithLabel: FC<InputProps & { label: string }> = ({ label, ...props }) => (
  <FormControl>
    <FormLabel>{ label }</FormLabel>
    <CustomInput {...props} />
  </FormControl>
)

forwardRefもChakra UI側で用意されている。

import { forwardRef, Input, InputProps } from "@chakra-ui/react";

export const InputWithRef = forwardRef<InputProps, "input">((props, ref) => {
  return <Input {...props} ref={ref} />
})

Textareaのheightを入力行数に応じて可変にする

スマホだとよく見かけるあのUIです。デフォルトだと1行サイズだけど、改行するとその分heightが伸びるやつ。うまいこと縮小もしてくれる。

react-textarea-autosizeを利用すると簡単に実装できます。

yarn add react-textarea-autosize

して、

import AutosizeTextarea from "react-textarea-autosize"

export const CustomAutosizeTextarea = forwardRef<
  TextareaProps,
  "textarea"
  >((props, ref) => {
  return (
    <>
      <Textarea
        rows={5}
        as={AutosizeTextarea}
        minH="unset"
        overflow="hidden"
        minRows={1}
        maxRows={5}
        ref={ref}
        {...props}
      />
    </>
  )
})

やったあ

モーダルをスマホで見るとき、ピンチで拡大・縮小ができるようにするやつ。
モーダル内のInputにフォーカスした際のズームを元に戻せなくて困ったりするからとりあえず付けとくんでいいんじゃないか説ある。

あとサイズはModalにsize渡すけど、ModalContentにmaxWidthつけるんでも調整できたりする。

Heading

Textで見出しとか作ってたけど、Headingってコンポーネントがあった。hタグになってくれる。

  <Heading noOfLines={1}>
    This is heading
  </Heading>

（ほんとはもういっこ重いの書こうと思ってたけど最新で修正されてたのでこまいのでお茶濁しました）

コンポーネントをラップする

Textareaのheightを入力行数に応じて可変にする

Modal > allowPinchZoom

Heading

Discussion