Chakra UIを利用してカスタムコンポーネントを作ってみた

こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。

Chakra UIにはReactで利用できる様々なUIコンポーネントが用意されていますが、既存のコンポーネントを少しカスタマイズしたり、利用方法に制約を加えたいことがあります。

実際に、Buttonコンポーネントをカスタマイズしたものを作成してみたので、対応方法についてまとめたいと思います。

単純にラップする

まずは単純にラップしたコンポーネントを作成してみます。

以下の公式ドキュメントを参考に対応をしていきましょう。

今回は「既存のButtonコンポーネントをカスタマイズしたものを作成したい」という点と、Buttonにrefが指定される可能性を考慮して、ドキュメントに記載のOption 1を参考に作成します。

import {
  Button as ChakraButton,
  ButtonProps as ChakraButtonProps,
  forwardRef,
} from '@chakra-ui/react'

export type ButtonProps = ChakraButtonProps
export const Button = forwardRef<ButtonProps, 'button'>((props, ref) => {
  return (
    <ChakraButton {...props} ref={ref}></ChakraButton>
  )
})

これは、ドキュメントとほぼ同じ感じですね。

スタイルを限定する

次に、更にスタイルを限定したボタンを作成してみます。

PrimaryButtonというコンポーネントとして、colorSchemeとvariantを限定（外部からは変更不可）なコンポーネントとしてみます。

export type PrimaryButtonProps = Omit<ButtonProps, keyof Pick<ButtonProps, 'colorScheme' | 'variant'>>
export const PrimaryButton = forwardRef<PrimaryButtonProps, 'button'>((props, ref) => {
  return (
    <Button {...props} colorScheme={'blue'} variant={'solid'} ref={ref}></Button>
  )
})

まずはPrimaryButtonPropsを定義します。ここではOmitを利用して、既存のButtonPropsからcolorSchemeとvariantを除去します。

次に、このPrimaryButtonPropsを利用してPrimaryButtonを定義することで、colorSchemeとvariantはプロパティとして指定できないコンポーネントとしました。

このButtonコンポーネントのスタイルはcolorScheme={'blue'} variant={'solid'}と明示的にプロパティ指定をしており、これによりスタイルが限定されています。

まとめ

以上、Chakra UIを利用して独自コンポーネントを作ってみました。

Chakra UIでは比較的簡単にコンポーネントの拡張や作成ができるので、共通利用したいコンポーネントがある場合には独自コンポーネントを作成することで効率化できるかなと思います。

どなたかのお役に立てば幸いです。それでは！