๐ React Hooks for form state management and validation (Web + React Native)
MIT License
Bot releases are hidden (Show)
Published by bluebill1049 about 4 years ago
๐ fix #2403 issue with re-render valid formState in useFieldArray (#2418)
๐จ๐ปโ๐ป revert getValues defaultValues update (#2404)
๐ fix 2406 with Controller's mode for all (#2407)
Published by bluebill1049 about 4 years ago
๐ fix #2395 bug with isDirty
due to useFieldArray
delete (#2396)
Published by bluebill1049 about 4 years ago
๐ fix #2382 issue with defaultValues inside submit values (#2390)
๐ฌ fixed dirty bugs with useFieldArray (#2368)
๐งช increase test coverage (#2385)
Published by bluebill1049 about 4 years ago
๐ fix #2310 useWatch with useFieldArray delete (#2358)
๐ fix 2336 with set setValue (#2344)
๐ป enhance getValues() #2308 (#2359)
๐ป fixed #2339 (#2360)
๐ฆ fix #2312 issue useFieldArray with react beautiful DND (#2313)
๐ฏ allow resolver to be sync or async (#2305)
๐งโโ๏ธ increased test coverage
Published by bluebill1049 over 4 years ago
๐ฆ fix firefox setDirty issue (#2277)
โจ๏ธ fix type for MutationObserver observe method
๐ค improve watch internal (#2270)
๐ fix the issue with getValues nested object wth shouldUnregister to false (#2278)
๐งโโ๏ธ increase unit tests coverage
Published by bluebill1049 over 4 years ago
๐ fix #2246 issue with watch with null value (#2248)
๐ fix #2240 issue with unmounted data gets updated when shouldUnregister
โจ๏ธ expose ArrayField type (#2254)
๐ fix UnpackNestedValue type (#2263)
๐ support multiple errors message for an individual type (#2247)
๐ fix #2257 nested field array remove error (#2260)
๐ fix #2017 issue with move and default value to undefined (#2265)
๐งโโ๏ธ increase unit tests coverage
Published by bluebill1049 over 4 years ago
๐ fix #2220 with getValues() (#2230)
Published by bluebill1049 over 4 years ago
๐ fix #2191 with unset nested error (#2207)
๐งโโ๏ธ improved handleChangeRef test (#2204)
๐ fixed useForm test bugs (#2189)
๐ฅ improved bundle size with production code (#2183)
๐ fix #2153 issue with reValidate blur mode (#2175)
๐ fix getValues when shouldUnregister set to false (#2166)
๐ fix #2160 issue with useFieldArray move and swap (#2161)
Published by bluebill1049 over 4 years ago
๐ fix #2160 issue with useFieldArray move and swap
Published by bluebill1049 over 4 years ago
๐ต unlock onFocus feature for RN (#2148)
๐ fix Controller checked prop (#2140)
๐ฆ fix #2131 watch fields not updated with HMR (#2145)
๐ fix useWatch with useFieldArray re-render issue (#2123)
Published by bluebill1049 over 4 years ago
๐ fix #2050 update dirty when input unmount (#2054)
๐ fixed isDirty (#2055)
๐ช remove unnecessary deps
in useForm
hook (#2047)
๐ fix #2081 with useWatch and reset API (#2085)
๐ท close #2037 with RN handleSubmit arg empty object (#2093)
๐ close #2073 (#2092) export types from form types
๐ดโโ๏ธ close #1990 issue with setValue, getValues, watch and reset
๐ง improve watch API with useFieldArray delete (#2072)
๐ fix #2112 controller re-render bug (#2115)
Published by bluebill1049 over 4 years ago
๐ fix unset nested array object (#2040)
๐จ๐ปโ๐ป export ValidationRules type (#2033)
๐ fix #2017 issue with errors not getting swap in useFieldArray (#2018)
๐ fix #1996 trigger validation result (#2006)
Published by bluebill1049 over 4 years ago
๐ fix #1963 with register type at context (#1970)
๐ shouldUnregister will not clear error and internal form state (#1998)
๐ fix useWatch defaultValue (#1968)
๐ fix #1931 with reValidateMode (#1933)
๐ท๐ปโโ๏ธ improve rollup config (#2001)
๐ improve build settings (#1974)
๐ง๐ปโโ๏ธ change module name to index and remove npmignore (#1956)
Published by bluebill1049 over 4 years ago
โก feature/set value should not set dirty
to true and give users option
Reason
The current API is confusing with support both name as string and array of values. In addition, programmatically set a field should give users the option to set dirty
, we shouldn't set dirty to true
when user setValue programmatically by default.
setValue(fieldName, values, config)
setValue('test', 'value', { shouldValidate: false, shouldDirty: false })
๐ fix/improve setError & clearError (#1907)
setError
will focus one error at a time and remove confusing set multiple errors, behavior change.
setError
will persis an error if it's not part of the form, which requires manual remove with clearError
setError
error will be removed by validation rules, rules always take over errorsReason
should focus an error at a time just like the name suggested, refine the API and remove multiple errors set.
- setError('test', 'test', 'test')
+ setErrror('test', { type: 'test', message: 'bill'})
Rename to clearErrors
Reason
This function allow remove multiple errors, so make sense to rename it to clearErrors
- clearError()
+ clearErrors()
๐๐ป fix/get values (#1913)
getValues
will no longer return the default value.
Reason
getValues should use to get the current form values, it doesn't make sense to get default values.
๐ improve ControllerProps type (#1872)
Published by bluebill1049 over 4 years ago
๐ config for auto un-register and type message to be string (#1809)
useForm({
shouldUnregister: false // unmount input state will be remained
})
๐๏ธ reduce lib weight (#1806)
๐ fix #1816 with controller methods cache (#1817)
๐ revert useLayoutEffect
(#1822)
๐ fix #1815 bug with get default value cause dirty not set correct
๐ fix #1843 dirty when combined with useForm and useFieldArray (#1844)
๐ fix #1851 nested object with useWatch (#1856)
๐ move ErrorMessage component to @hookform/error-message (#1850)
Published by bluebill1049 over 4 years ago
๐จ๐ปโ๐ป enable controller register rules on each render (#1791)
๐ fix #1787 context issue with fieldArray dirty (#1792)
๐ register controller field using useLayoutEffect (#1789)
๐ fix ControllerProps type (#1779)
๐ reduce useFieldArray swap render() (#1772)
๐ fix bug around controller isSubmitted state (#1754)
๐ fix issue with useFieldArray swap dirty value (#1759)
Published by bluebill1049 over 4 years ago
Features:
๐ฏ auto focus with useFieldArray (#1689)
append({}, autoFocus = true);
prepend({}, autoFocus = true);
insert({}, autoFocus = true);
๐ #1580 Controller with render props API (#1711)
Less of a breaking change for existing users, simple usage remain while still give the user the full control with render prop. Remove the following props
onChange
onChangeName
onBlur
onBlurName
valueName
Simple usage as below, will not be impacted:
<Controller as={TextField} control={control} name="test" />
Usage involed configration and those remmoved props:
-<Controller
- as={CustomInput}
- valueName="textValue"
- onChangeName="onTextChange"
- control={control}
- name="test"
-/>
+<Controller
+ render={({ onChange, onBlur, value }) => (
+ <CustomInput onTextChange={onChange} onBlur={onBlur} textValue={value} />
+ )}
+ control={control}
+ name="test"
+/>
change render props from children
to render
. you can either use as
or render
. for multiple error messages, you will have to use render
<ErrrorMessage errors={errors} as="p" />
<ErrrorMessage errors={errors} render={({message}) => {message}} />
Bug & Improvements:
๐ fix watch and setValue type (#1705)
๐ fix handleSubmit type for native multiple input (#1698)
๐ฏ close #1683 watch API with React Fast Refresh (#1685)
๐ fix isValid issue with setError (#1678)
๐ฏ close #1619 issue around errors with useFieldArray (#1673)
๐ฅ clean up lib types' structure (#1670)
๐ close #1619 when useFieldArray errors is not array (#1671)
๐ fix dirty fields read at field array (#1668)
๐ fix issue with isDirty when use context (#1666)
โค๏ธ improve setValue and watch type (#1660)
๐ fix register type to accept null argument (#1663)
๐ฅ improve generics naming (#1653)
๐ fix dirtyFields type typo (#1654)
๐ณ rename OnSubmit to SubmitHandler (#1708)
๐ fix undefined ref in options (#1727)
โ
add displayName for easier dev-tools debugging (#1740)
Published by bluebill1049 over 4 years ago
remove validationSchema
and embrace validation resolver
https://github.com/react-hook-form/react-hook-form-resolvers
Reason: we would love to support all kinds of schema validation instead of just Yup, also it's not fair to carry that extra logic for users who don't use schema at all. also perhaps there are lighter options than only Yup
as well.
Name | Size | Url |
---|---|---|
Superstruct | 4.5KB | link |
Yup | 20KB | link |
Joi | 29KB | link |
- useForm({ validationSchema: schema })
+ useForm({ resolver: yupResolver(schema) })
+ useForm({ resolver: joiResolver(schema) })
+ useForm({ resolver: superStructResolver(schema) })
import React from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from 'react-hook-form-resolvers';
const SignupSchema = yup.object().shape({
name: yup.string().required(),
age: yup.number().required(),
});
const App = () => {
const { register, handleSubmit } = useForm({
resolver: yupResolver(SignupSchema), // yup, joi and even your own.
});
return (
<>
<form onSubmit={handleSubmit(d => console.log(d))}>
<label>Test</label>
<input name="test" ref={register} />
<input type="submit" />
</form>
</>
);
};
reanme validationResolver
to resolver
reanme validationContext
to context
reanme validateCriteriaMode
to criteriaMode
Reason: less for the user to type, consistent with the rest of the APIs. This is a generic validation library, it makes sense to keep naming generic and validation should already be the context for this whole lib.
- validationResolver,
- validationContext,
+ resolver,
+ context,
Controller
props onChange
change from array arguments to object arguments
Reason: This should be the expected behavior for function's arguments
.
- onChange = {([e]) => console.log(e)};
+ onChange = {(e) => console.log(e)};
triggerValidation
rename to trigger
Reason: Less for a user to type and consistent with the rest of the APIs. However, if this having issue or conflict with your existing code base, you have the option to rename it in the deconstructor.
- triggerValidation();
+ trigger();
FormContext
rename to FormProvider
Reason: Align name with all those big libraries such as Redux, styled-components and etc.
- <FormContext />
+ <FormProvider />
export FormContext
Reason: Some users may want to use FormContext.Consumer
.
import { FormContext } from 'react-hook-form';
// in your connected component
render() {
return (
<FormContext.Consumer>
{({ register, handleSubmit }) => {
// do something with the useForm methods here
}}
</FormContext.Consumer>
)
};
remove nest
option for watch
& getValues
, so data return from both methods will be in FormValues
shape.
Reason: Consistency for form values and better type support.
- getValues({ nest: true }); // { test: { data: 'test' }}
- watch({ nest: true }); // { test: { data: 'test' }}
+ getValues(); // { test: { data: 'test' }}
+ watch(); // { test: { data: 'test' }}
dirtyFields
change type from set
to object
Reason: consistency form state API and simplify the codebase. Reduced codebase size with object data shape.
dirty
change name to isDirty
Reason: consistency form state name for boolean data.
TS: NestedValue
Reason: The field value can be array/object such as Material-UI Multiple Select and custom registered field (Custom Register).
Currently, errors object expects an array value to always be multiple fields, but it can also be a single field with an array value. To solve this, it supports NestedValue to determine if it is the field value (array/object).
import { useForm, NestedValue } from 'react-hook-form';
type FormValues = {
key1: string;
key2: number;
key3: NestedValue<{
key1: string;
key2: number;
}>;
key4: NestedValue<string[]>
};
const { errors } = useForm<FormValues>();
errors?.key1?.message // no type error
errors?.key2?.message // no type error
errors?.key3?.message // no type error
errors?.key4?.message // no type error
useWatch
(new) subscribe to registered inputs.
Reason: This could isolate the re-render within a particular component without trigger re-render at the form level. This is different from watch
API, which will re-render at the root of useForm
<input name="test" ref={register} />
function IsolateReRender() {
const { state } = useWatch({
name: 'test',
control,
defaultValue: 'default'
});
return <div>{state}</div>
}
getValues()
support array of field names
Reason: API Consistency with watch
+ getValues(['test', 'test1']); // { test: 'test', test1: 'test1' }
useForm({ mode: 'all' })
support all validation
Reason: so each input can validate with blur and change. https://github.com/react-hook-form/react-hook-form/issues/1222
+ useForm({ mode: 'all' })
Published by bluebill1049 over 4 years ago
Revert "๐ fix #1573 yup min length validation (#1609)" (#1618)
Published by bluebill1049 over 4 years ago
๐ fix IsFlatObject
type for Date and FileList (#1610)