๐ React Hooks for form state management and validation (Web + React Native)
MIT License
Bot releases are visible (Hide)
Published by bluebill1049 almost 2 years ago
๐ upgrade to TS4.9 (#9371)
๐ fix #9383 always updates the errors state for the field array even when the errors subscription missing (#9384)
๐ป close https://github.com/react-hook-form/react-hook-form/issues/9379 flush extra re-render to update the current form state subscription
๐ฅฝ improve watch logic (#9397)
๐จ fix conditional useFormState test (#9388)
thanks to @romain-trotard
Published by bluebill1049 almost 2 years ago
values
propsThe following syntax will react to values
prop update/changes.
const values = await fetch('API')
useForm({
values, // will reset the form when values updates
// resetOptions: {
// keepDirtyValues: true
// }
})
defaultValues
propsThe following syntax will support async defaultValues
, so we will manage the reset
form internally and update formState
accordingly.
useForm()
callresetOptions
as welluseForm({
defaultValues: fetch('API')
// resetOptions: {
// keepDirtyValues: true
// }
})
React use
API
useForm({
defaultValues: use(fetch('API'))
// resetOptions: {
// keepDirtyValues: true
// }
})
values
and defaultValues
values
will react to changes and reflect on the form values, and defaultValues
is cached for once and will never re-run the promise or react to defaultValues
changes.
๐ป close #9379 flush extra re-render at useFormState to update current form state subscription (#9380)
๐ upgrade to TS4.9 (#9371)
Published by bluebill1049 almost 2 years ago
๐ fix #9366 useWatch
with shadow clone Set data (#9369)
๐ fix #9365 native validation error persists (#9370)
Published by bluebill1049 almost 2 years ago
๐คฆ fix #9355 by revert "๐ฅธ related #9310 regression to include actual ref instead custom object ( #9312)"
Published by bluebill1049 almost 2 years ago
โจ๏ธ close #9339 objects of validation rules type (#9341)
๐ฅธ related #9310 regression to include actual ref instead custom object ( #9312)
Published by bluebill1049 almost 2 years ago
Revert "๐คฏ use input reference instead custom object (#9132)" (#9311)
Published by bluebill1049 almost 2 years ago
๐ฎ improve #8601 and remove the relationship between isValid
state with mode
(#9219)
๐ fix #9282 regression on async validation block validation (#9286)
๐ fix #9251 isValidating
state stale with resolver (#9254)
๐ delete dirty fields node instead of marking as false (#9156)
๐คฏ use input reference instead custom object (#9132)
๐ฅ improve native reset API invoke (#9293)
๐ฆ related #9290 improve setCustomValidity logic (#9292)
๐บ fix re-render bug with isValid (#9307)
Published by bluebill1049 about 2 years ago
๐ฐ support validation for week and time input type (#9189)
<input
{...register("week", { min: "2022-W40", max: "2022-W50" })}
type="week"
/>
<input
{...register("time", { min: "11:00", max: "12:00" })}
type="time"
/>
๐ง๐ป enable focus error with disabled inputs while submitting (#9155)
๐งฑ prevent runtime error startsWith
called with undefined (#9223)
๐ fix #9216 isValid state not update with async form level trigger (#9218)
๐งฆ fix accessibility issue on examples with input missing id (#9174)
๐ check field array value type before updating (#9170)
๐ update TSDoc for useFieldArray (#9178)
thanks to @BogdanCerovac and @leapful
Published by bluebill1049 about 2 years ago
๐จ feature: include defaultValues
inside formState (#8966)
const { formState, watch } = useForm({
defaultValues: { name: 'test' }
})
const { defaultValues } = useFormState()
const name = watch('name')
return (
<div>
<p>Your name was {defaultValues.name}</p>
<p>Updated name is {name}</p>
</div>
)
๐จ close #9058 avoid clone object when contains prototype methods
class DataModel {
constructor() {
this.firstName = null
}
}
const formData = new DataModel({ firstName: "Bob" })
useForm({
defaultValues: formData // no longer get clone internally
})
๐ fix #9134 useFieldArray validation action inconsistency (#9136)
๐ฅท close #9126 useController ref overwrite under strict mode (#9130)
๐ตโ๐ซ close #9105 improve input focus method check (#9109)
๐ fix UseFieldArrayAppend types example (#9093)
๐ change link (#9159)
๐ improve naming of options forEach local (#9152)
thanks to @arieloO @Ilaygoldman and @simenbrekken-visma
Published by bluebill1049 about 2 years ago
๐จ feature: include defaultValues
inside formState (#8966)
const { formState, watch } = useForm({
defaultValues: { name: 'test' }
})
const { defaultValues } = useFormState()
const name = watch('name')
return (
<div>
<p>Your name was {defaultValues.name}</p>
<p>Updated name is {name}</p>
</div>
)
๐ตโ๐ซ close #9105 improve input focus method check (#9109)
๐จ close #9058 avoid clone object when contains prototype methods
class DataModel {
constructor() {
this.firstName = null
}
}
const formData = new DataModel({ firstName: "Bob" })
useForm({
defaultValues: formData // no longer get clone internally
})
๐ fix UseFieldArrayAppend types example (#9093)
thanks to @arieloO
Published by bluebill1049 about 2 years ago
๐ชฒ fix #9082 inconsistency between single/group of checkboxes disabled check state (#9083)
๐ก๏ธ improve setFocus to prevent throw error (#9081)
Published by bluebill1049 about 2 years ago
๐ feature: reset to support callback syntax (#9051)
reset
with partial form values will require invoking getValues
at the same time, here is an improvement ๐
Convert your code from:
reset({
...getValues(),
partialData: 'onlyChangeThis'
})
to:
reset((formValues) => {
return {
...formValues,
partialData: 'onlyChangeThis'
}
})
Published by bluebill1049 about 2 years ago
๐ feature: new type FieldPathByValue
field path by value generic implementation
function CustomFormComponent<
TFieldValues extends FieldValues,
Path extends FieldPathByValue<TFieldValues, Date>
>({ control, name }: { control: Control<FieldValues>; name: Path }) {
const { field } = useController({
control,
name,
});
}
function App() {
const { control } = useForm<{
foo: Date;
baz: string;
}>();
return (
<form>
<CustomFormComponent control={control} name="foo" /> {/* no error */}
<CustomFormComponent control={control} name="baz" /> {/* throw an error since baz is string */}
</form>
);
}
๐ต close #8969 improve type for useFieldArray rules validate prop #8974
๐ upgrade to TS 4.8.0 and Jest 29 #8620
๐ fix #8970 register field array cause render issue #8972
๐ fix: typings for useWatch() with no arguments #8923
๐ fix #8919 make useController
fieldState
properties enumerable
const { fieldState } = useController({ name: 'test' })
const copy = {...fieldState} โ
๐ถ๐ป close #8909 form context children prop type (https://github.com/react-hook-form/react-hook-form/pull/8910)
<FormProvider {...methods}>
<div /> // โ
<div /> // โ
</FormProvider>
๐ allow field errors to escape type check when provided with any type
๐ github workflows security hardening #8965
๐ ci: stop csb ci from publishing a comment on PR (https://github.com/react-hook-form/react-hook-form/pull/8977)
thanks to @Moshyfawn, @sashashura, @carvalheiro, @chetvishal and @MicaelRodrigues
Published by bluebill1049 about 2 years ago
๐ feature: new type FieldPathByValue
field path by value generic implementation
function SomeCustomFormComponent<
TFieldValues extends FieldValues,
Path extends FieldPathByValue<TFieldValues, Date>
>({ control, name }: { control: Control<FieldValues>; name: Path }) {
const { field } = useController({
control,
name,
});
return null;
}
function ExampleOfUsage() {
const { control } = useForm<{
foo: Date;
baz: string;
}>();
return (
<div>
<SomeCustomFormComponent control={control} name="foo" />{" "}
{/* throw no error */}
<SomeCustomFormComponent control={control} name="baz" />{" "}
{/* throw an error since baz is string */}
</div>
);
}
๐ fix https://github.com/react-hook-form/react-hook-form/issues/8919 make useController fieldState properties enumerable
const { fieldState } = useController({ name: 'test' })
const copy = {...fieldState} โ
๐ถ๐ป close https://github.com/react-hook-form/react-hook-form/issues/8909 form context children prop type (https://github.com/react-hook-form/react-hook-form/pull/8910)
<FormProvider {...methods}>
<div /> // โ
<div /> // โ
</FormProvider>
๐ allow field errors to escape type check when provided with any type
thanks to @carvalheiro, @chetvishal and @MicaelRodrigues
Published by bluebill1049 about 2 years ago
Revert "๐งณ let isSubmitting
state update after valid form (https://github.com/react-hook-form/react-hook-form/pull/8829)"
Published by bluebill1049 about 2 years ago
๐ fix(path): keys of Date | FileList | File shouldn't be add to the PathImpl https://github.com/react-hook-form/react-hook-form/pull/8804
๐ fix Date, FileList, File and Blob FieldErrors mapping #8772
๐ update isSubmitting
state after valid form #8829
function App() {
const { formState: { isSubmitting }, register } = useForm()
console.log(isSubmitting) // isSubmitting will remain false if form is invalid during submission
return <form onSubmit={handleSubmit(async () => await sleep(1000))}>
<input {...register('test', { required: true })} />
</form>
}
๐ง upgrade to cypress 10 #8769
๐ fix nested fields example #8840
๐ add nested form example #8703
๐ improve doc of single watch #8773
๐ fixing typo (Contruรญdo to Construรญdo) on pt-BR translation #8762
thanks to @HarmonyEarth, @yleflour, @glekner, @vemoo, @ronny1020 and @joaoeffting
Published by bluebill1049 about 2 years ago
๐ feature request: #6879 useFieldArray
support rules
props (#8102)
useFieldArray({
name: 'test',
rules: {
required: true,
minLength: 2,
maxLength: 10,
validate: (fieldArrayValues) => {
if (fieldArrayValues[2].title === 'test') {
return 'validate Error'
}
}
}
})
errors?.test?.root?.message // access root level errors
Note: Related context and poll for error message naming: https://github.com/react-hook-form/react-hook-form/discussions/8625
๐ fix https://github.com/react-hook-form/react-hook-form/issues/8584: handle nullable nested properties (https://github.com/react-hook-form/react-hook-form/pull/8699)
๐ close https://github.com/react-hook-form/react-hook-form/issues/8689 fix type inconsistency with control (https://github.com/react-hook-form/react-hook-form/pull/8691)
๐ fix native form reset isn't executed if first fieldReference isn't a HTMLElement (https://github.com/react-hook-form/react-hook-form/pull/8678)
๐ fix useFieldArray action type incorrectness (https://github.com/react-hook-form/react-hook-form/pull/8660)
๐ close https://github.com/react-hook-form/react-hook-form/issues/8653 when useFormContext provide no generic for type check (https://github.com/react-hook-form/react-hook-form/pull/8654)
๐ฐ useFormContext include type tests (https://github.com/react-hook-form/react-hook-form/pull/8656)
๐คฃ fix typo in useForm.ts (https://github.com/react-hook-form/react-hook-form/pull/8645)
๐ README Helper / Sponsor Generation Script / Workflow (https://github.com/react-hook-form/react-hook-form/pull/8676)
thanks to @@ANTARES-KOR @zandowc @@alexviar @ElectronicsArchiver and @kyoto7250
Published by bluebill1049 over 2 years ago
๐ช feature request: #6879 useFieldArray
support rules
props (#8102)
useFieldArray({
name: 'test',
rules: {
required: true,
minLength: 2,
maxLength: 10,
validate: (fieldArrayValues) => {
if (fieldArrayValues[2].title === 'test') {
return 'validate Error'
}
}
}
})
errors?.test?.root?.message // access root level errors
Note: Related context and poll for error message naming: https://github.com/react-hook-form/react-hook-form/discussions/8625
Published by bluebill1049 over 2 years ago
๐ fix https://github.com/react-hook-form/react-hook-form/issues/8584: field errors type with optional fields (https://github.com/react-hook-form/react-hook-form/pull/8591)
๐งณ close https://github.com/react-hook-form/react-hook-form/issues/8600 update code example for NestedValue input
๐ผ Integrate jest-preview into react-hook-form (https://github.com/react-hook-form/react-hook-form/pull/8577)
๐ค improve the readability of Merge type (https://github.com/react-hook-form/react-hook-form/pull/8570)
๐ test: migration from ts-jest to @swc/jest (https://github.com/react-hook-form/react-hook-form/pull/8572)
๐น refactor: use const instead of props (https://github.com/react-hook-form/react-hook-form/pull/8571)
๐ feat: Add ability to search test file on watch mode (https://github.com/react-hook-form/react-hook-form/pull/8573)
๐ง๐ป ensure the field is focused when selected (https://github.com/react-hook-form/react-hook-form/pull/8566)
thanks to @nvh95, @elstgav and @kotarella1110
Published by bluebill1049 over 2 years ago
โ๏ธ upgrade to react 18 (https://github.com/react-hook-form/react-hook-form/pull/8529)
๐ fix https://github.com/react-hook-form/react-hook-form/issues/8558 missing select function for controlled component (https://github.com/react-hook-form/react-hook-form/pull/8559)
๐ฌ improve nested field errors
type (https://github.com/react-hook-form/react-hook-form/pull/8527)
๐ UseFormHandleSubmit
remove unused generic (https://github.com/react-hook-form/react-hook-form/pull/8526)
๐ deprecate on NestedValue
and UnpackNestedValue
(https://github.com/react-hook-form/react-hook-form/pull/8528)
type FormValues = {
- select: NestedValue<{
- nested: string
- }>
+ select: {
+ nested: string
+ }
}
errors.select.message โ
The deprecation with UnpackNestedValue
caused a breaking change on the @hookform/resolvers
package, please refer to the changelog and upgrade the resolver to the latest.
๐ฅผ close https://github.com/react-hook-form/react-hook-form/issues/8564 update changelog for breaking change with resolver
๐ฅ The above type deprecation cause breaking change with @hookform/resolvers
needs to be upgraded to version ^2.9.3
above
Huge thanks go to @felixschorer on type improvement and @romain-trotard for improving tests for react 18