【React + TypeScript】HTMLElementのPropsを継承したい

August 20, 2022

例えば <button> などの HTMLElement をラップしたカスタムコンポーネントを作る時、デフォルトのプロパティを継承してプロパティを定義したい。ということはよくあります。

そんな時、使えるのが React.ComponentPropsWithoutRef です。

interface Props extends React.ComponentPropsWithoutRef<"button"> {
  colorful?: boolean
}

const FancyButton = ({ colorful, ...props }: Props) => {
  if (colorful) {
    // colorfulプロパティを見て何かしらの処理
  }
  return <button {...props} />
}

プロパティをひとつひとつ Props に追加しなくていいのでラクですね！ 👏