This is my custom react-hook controller component written with TypeScript
<Controller
control={control}
name={name}
defaultValue={defaultValue}
rules={validate}
ref={register({
validate
})}
render={props => (
<input
name={props.name}
value={props.value}
ref={props.ref}
type={'text'}
placeholder={label}
aria-label={label}
onChange={handleChange}
data-error={errorText !== '' && errorText}
/>
)}
/>
The issue I'm facing is that the 'ref' attribute doesn't work as intended, according to examples in react-hook-form.
When I try to use 'inputRef' instead, I encounter TypeScript errors:
Property 'inputRef' does not exist on type 'DetailedHTMLProps<InputHTMLAttributes, HTMLInputElement>'
My attempt to add this 'inputRef' property to the index.d.ts file causes conflicts with other declared modules.
declare module 'react' {
import React from 'react';
interface HTMLInputAttributes<T> extends React.HTMLAttributes<T> {
// extending React's HTMLAttributes
inputRef?: any;
}
}
declare module '*.svg' {
const content: any;
export const ReactComponent: any;
export default content;
}