Releases: react-hook-form/react-hook-form
Releases · react-hook-form/react-hook-form
Version 7.43.5
Version 7.43.4
Version 7.43.3
Version 7.43.2
Version 7.44.0-next.1
📄 Form Component update
- added support for custom
fetcher
// axios
<Form
action="/api"
method="post"
fetcher={(action, { values }) => axios(action, values)}
/>
// SWR, Tan Query
<Form
action="/api"
method="post"
fetcher={(action, { values }) => mutation(action)}
/>
- server error no longer set custom error
Beta documenation: http://localhost:8000/api/useform/form
🗑️ remove JSX message check (#9921)
Version 7.44.0-next.0
📄 Form
Component
Usage example
- React Web
const { control, register, formState: { isSubmitSuccessful, errors } } = useForm({
// progressive: true, optional prop for progressive enhancement
});
<Form action="/api" control={control}>
<input {...register('name')} />
{isSubmitSuccessful && <p>Form submit successful.<p>}
{errors?.root?.server && <p>Form submit failed.</p>}
<button>submit</button>
</Form>
- React Native
const { control, register, formState: { isSubmitSuccessful, errors } } = useForm();
<Form action="/api" control={control} render={({ submit }) => {
<View>
{isSubmitSuccessful && <Text>Form submit successful.<Text>}
{errors?.root?.server && <Text>Form submit failed.</Text>}
<Button onPress={() => submit()} />
</View>
}}/>
Types
- Component props
export type FormProps<
T extends FieldValues,
U extends FieldValues | undefined = undefined,
> = Partial<{
control: Control<T>;
children?: React.ReactNode | React.ReactNode[];
render?: (props: {
submit: (e?: React.FormEvent) => void;
}) => React.ReactNode | React.ReactNode[];
onSubmit: U extends FieldValues ? SubmitHandler<U> : SubmitHandler<T>;
onSuccess: ({ response }: { response: Response }) => void;
onError: ({
response,
error,
}:
| {
response: Response;
error?: undefined;
}
| {
response?: undefined;
error: unknown;
}) => void;
headers: Record<string, string>;
validateStatus: (status: number) => boolean;
}> &
Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onError'>;
Version 7.43.1
Version 7.43.0
🌏 feature: support global error type #9746
const onSubmit = async () => {
const response = await fetch(...)
if (response.statusCode > 200) {
setError('root.serverError', {
type: response.statusCode,
})
}
}
const onClick = () => {
setError('root.random', {
type: 'random',
})
}
return (
<>
{errors.root.serverError.type === 400 && <p>server response message</p>}
<p>{errors.root?.serverError?.message}</p>
<p>{errors.root?.random?.message}</p>
</>
)
🪜 fix set values
for controlled components (#9780)
const { control } = useForm({ values: { test: '' } })
<Controller name="test" /> // no longer throw react warning for uncontrolled become controlled.
🚓 stronger typing to document non-spec attribute uses (#9809)
register('number', {
valueAsNumber: true,
pattern: /[1-4]/g // ❌ type error
})
🏋🏻♀️ reduce package size (#9778)
🧧 reduce unknown and any (#9816)
thanks to @rekliner
Version 7.43.0-next.0
🌏 feature: support global error type #9746
const onSubmit = () => {
const response = await fetch(...)
if (response.statusCode > 200) {
setError('root.serverError', {
type: response.statusCode,
message: e.message,
})
}
}
const onClick = () => {
setError('root.random', {
type: 'random',
message: 'random'
})
}
return (
<>
{errors.root.serverError.type === 400 && <p>server response message</p>}
<p>{errors.root.serverError.message}</p>
<p>{errors.root.random.message}</p>
</>
)
🪜 fix set defaultValues for controlled components with values props (#9780)