Vision
📖 (DX) Strictly typed form
🏋🏻♀️ Reduce package size
🏎 Performance
💁♂️ Simplicity and consistency
Documenation
https://react-hook-form-website-git-v7.bluebill1049.now.sh/ (temp URL)
Issues
- close #3719
- close #2887
- close #2086
- close #2155
- close #3538
- close #3110
- close #3698
- close #1680
- close #3155
- close #3045
- close #3525
- close #912
API changes
Changelog will be updated once the V7 branch is merged into the master branch.
register
- <input ref={register, { required: true }} name="test" />
+ <input {...register('name', { required: true })} />
MutationObserver
is removed.- input name will need to be consistent with '.' syntax instead of
[]
for the array field, this is to be consistent with typescript usage.
- test[2].test
+ test.2.test
valueAs
It will always be run before the build-in validator and resolver
.
useForm<{ test: number }>();
<input {...reigster('test', { validate: (data: number) => { console.log(data) } })} /> // the data will be consistent with type declaration.
Controller
- <Controller as={<input />} />
+ <Controller render={({ field }) => <input {...field} />} />
- <Controller render={(props) => <input {...props} />} />
+ <Controller render={({ field, fieldState, formState }) => <input {...field} />} />
fieldState : {
invalid: boolean;
isTouched: boolean;
isDirty: boolean;
error: FieldError;
}
reset
- reset(values, { isDIrty: true })
+ // second argument is still optional
+ reset(values, {
+ keepDefaultValues: true, // new
+ keepValues: true, // new
+ keepDirty: true,
+ })
getValues
const { register, getValues } = useForm({ defaultValues: { test: 'test' } });
console.log(getValues()) // v6 return {}
// v7 return { test: 'test' } and only the first call before the render, the second re-render getValues will read what's in the current view.
console.log(getValues());
return <input {...register('test')} />;
append
insert
prepend
append(object, config: { shouldDirty: boolean, focusIndex: number, focusName: string })
insert(object, config: { shouldDirty: boolean, focusIndex: number, focusName: string })
prepend(object, config: { shouldDirty: boolean, focusIndex: number, focusName: string })
append({
test: [
{ test: 'name' }
]
}) // support deep nested field array
resolver
- resolver: (values: any, context?: object) => Promise<ResolverResult> | ResolverResult
+ resolver: (
+ values: any,
+ context?: object,
+ options: {
+ criteriaMode?: 'firstError' | 'all',
+ names?: string[],
+ fields: { [name]: field } // Support nested field
+ }
+ ) => Promise<ResolverResult> | ResolverResult
watch
React.useEffect(() => {
watch((value, { name, type }) => {
console.log('value', value);
})
}, [watch])
- watch(['test', 'test1']); // { test: '1', test1: '2' }
+ watch(['test', 'test1']); // ['1', '2']
- watch('test', 'test'); // default value will return when inpu removed
+ watch('test', 'test'); // default value will only return on the initial call before render
trigger
- await trigger('test'); // will return true/false
- trigger('test'); // return void in v7
errors
- const { errors } = useForm();
+ const { formState: { errors } } = useForm();
useFormState
This new hook will allow you to subscribe formState
update at the component level instead of the root level where you initialized the useForm
. Users will have the capability to subscribe to individual form state at each useFormState
.
const { isDirty } = useFormState();
setError
- setError('test', { type: 'type', message: 'issue', shouldFocus: true })
+ setError('test', { type: 'type', message: 'issue' }, { shouldFocus: true })
unregister
unregister: (
name?: FieldPath<TFieldValues> | FieldPath<TFieldValues>[],
options?: Pick<
KeepStateOptions, 'keepTouched' | 'keepDirty' | 'keepIsValid' | 'keepErrors'
>,
) => void
touch
rename touch
to touchedFields
, keep it consistent with dirtyFields
from formState
.
deafultValues
useForm({
defaultValues: {test: 'test'}
});
getValues(); // V6 returns {} because nothing is registered
getValues(); // v7 restusn { test: 'test' } because of the shallow merge.
Remove console warning
The ES6 module build includes references to process.env.NODE_ENV, which breaks browser usages. We will remove those console.warning
for now, until we figure out a better solution in the long run. Also, improve the documentation to fulfill the gap.
TS Improvement
watch
clearErrors
setError
- remove IE 11 support