とあるコンポーネントのPropsで指定しているtypeを使いまわしたい時にComponentPropsを使うのを忘れそうなのでメモ。

const Hoge: React.FC<{ id: number }> = ({ id }) => {
  return <>{id}</>;
};

渡したidをrenderするだけのコンポーネントですが、これと完全に同じPropsを受け取る別のコンポーネントで型指定をお手軽にすることができる。

import Hoge from 'hoge.tsx';

type FooProps = React.ComponentProps<typeof Hoge>;

const Foo: React.FC<FooProps> = ({ id }) => {
  return <>{id}</>
};

React.ComponentPropsでtypeを作るとそのコンポーネントのPropsのtypeをそのまま持ってくることができます。