はじめに
chakra ui v2の Button を SaveButtonとしてコンポーネント化する際に、Button 自体のpropsもコンポーネント呼び出し先から指定できるようにしたかったので方法を調べた結果を共有します。
やり方
-
Buttonのprops型であるButtonPropsをカスタムの型と&する - propsの分割代入先に
...restとしてカスタムのprops以外をまとめて受け取れるようにする
SaveButton.tsx
/* eslint-disable @typescript-eslint/no-explicit-any */
import { Button, ButtonProps } from "@chakra-ui/react";
import React, { FC } from "react";
type Props = {
text: string;
onClick: () => void;
iconType?:
| React.ReactElement<unknown, string | React.JSXElementConstructor<any>>
| undefined;
};
export const SaveButton: FC<Props & ButtonProps> = (props) => {
const { text, onClick, iconType, ...rest } = props;
return (
<Button colorScheme="blue" rightIcon={iconType} onClick={onClick} {...rest}>
{text}
</Button>
);
};
使い方の例
Button の元々のpropsである type="submit" を指定できるようになりました！
<SaveButton text="登録" onClick={onClickSaveTodo} type="submit" />
その他のpropsも、もちろん指定できます。
おわりに
今までは、元々のprops指定できなくない！？と思ってたけど、これで気兼ねなくコンポーネント化できる。