React でコンポーネントの Props の型を取得する

プリミティブな UI を構築するとき、button や input などの HTML 要素をラップしたコンポーネントを作成することがあります。このようなコンポーネントでは、HTML 要素の Props に加えて、コンポーネント固有の Props を定義することが多いです。

HTML 要素の Props は必要なものだけを定義してもよいのですが、React.ComponentPropsWithoutRef を使ってすべての Props を定義しておくと便利です。

type Props = {
  // これはコンポーネント固有の Props
  variant?: "primary" | "secondary";
} & React.ComponentPropsWithoutRef<"button">;

React.ComponentPropsWithoutRef は button や input だけでなく、自作のコンポーネントに対しても使うことができます。これは Radix UI や React Aria Components などのヘッドレスコンポーネントライブラリをラップするときに便利です。

Props として明示的に ref を渡すことを許可したい場合には、React.ComponentPropsWithRef を使います。

type Props = {
  variant?: "primary" | "secondary";
} & React.ComponentPropsWithRef<"button">;