React で子コンポーネントのテキストのみを取り出したい

React で children で渡ってきた子コンポーネントのうち、テキスト部分だけ取り出したいこと、ありますよね？
そういうときに便利なのが React Children Utilities です。

こんな感じで使えます。

import Children from "react-children-utilities";

type Props = {
  children: React.ReactNode;
};

const ExtractOnlyText = ({ children }: Props) => {
  const text = Children.onlyText(children);
  return <div>{text}</div>;
};

他にも span 要素だけ取り出すみたいなことも出来るようです。すごい。
ということで、メモでした。

ちなみにライブラリなんぞいれたくねぇ！って人はこのコメントのコードを使うと良いです。