React Hook Form と Styled Components を一緒に使いたい
解決したいこと
- React Hook Form の register をいい感じに Styled-Components に渡したい。
- Styled-Components の ref の型といい感じに合わせたい。
環境
"react": "^16.13.1",
"react-hook-form": "^6.9.6",
"styled-components": "^5.1.1",
"typescript": "~3.7.2"
解決方法
- Styled Components が認識できるように型を書いてあげる。
コンポーネント側
type RefReturn =
| string
| ((instance: HTMLInputElement | null) => void)
| React.RefObject<HTMLInputElement>
| null
| undefined;
type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>,
HTMLInputElement> & {
placeholder?: string
name: string
register: ({required}: { required?: boolean }) => RefReturn;
};
type Ref = (instance: HTMLInputElement | null) => void | React.RefObject<HTMLInputElement> | null | undefined
const FormInput = ({name, register, required, placeholder}: Props) => {
return (
<Input
type="text"
placeholder={placeholder}
name={name}
ref={register({required}) as Ref}
/>
)
};
親コンポーネント
<FormInput
type="password"
placeholder="パスワード"
name="password"
register={register}
required
/>
参考
