π React Hooks for form state management and validation (Web + React Native)
MIT License
Bot releases are hidden (Show)
Published by bluebill1049 over 1 year ago
π fix resetField
defaultValue type and reduce any type (#10024)
π fix #9997 issue on the mounted state is updated with values prop (#10001)
Revert "π delete dirty fields node instead of marking as false (#9156)" (#9996)
π
improve state subscription consistency (#9984)
Published by bluebill1049 over 1 year ago
π fix #9972 input focus with submitted form (#9978)
π improve perf & save some bytes (#9968)
π fix #9955 useForm values prop keepDirtyValues not update isDirty
(#9959)
ποΈ remove JSX message check (#9921)
Published by bluebill1049 over 1 year ago
π Form Component update
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)}
/>
Beta documenation: http://localhost:8000/api/useform/form
ποΈ remove JSX message check (#9921)
Published by bluebill1049 over 1 year ago
π Form
Component
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>
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>
}}/>
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'>;
Published by bluebill1049 over 1 year ago
π fix #9871 issue with error type (#9873)
π fix #9842 clearErrors
method does not support global error (#9843)
Published by bluebill1049 over 1 year ago
π 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
Published by bluebill1049 almost 2 years ago
π 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)
Published by bluebill1049 almost 2 years ago
π fix #9773 useFormState missing state update (#9777)
π fix #9765 fix issue with strictMode with isValid state (#9771)
Published by bluebill1049 almost 2 years ago
π½ feature: validate function to include form values (#9079)
type FormValues = {
number1: number;
number2: number;
};
// Making exported validate function isolated for validation
export function validateNumber(_: number, formValues: FormValues) {
return formValues.number1 + formValues.number2 === 3;
}
export default function App() {
const { register, handleSubmit } = useForm({
defaultValues: {
number1: 0,
number2: 0
}
});
return (
<form onSubmit={handleSubmit((data) => console.log(data))}>
<input
type="number"
{...register("number1", {
validate: validateNumber,
valueAsNumber: true
})}
/>
<input
type="number"
{...register("number2", {
validate: validateNumber,
valueAsNumber: true
})}
/>
<button>submit</button>
</form>
);
}
π€οΈ keep track of traversed types to avoid self-referencing while constructing paths for a type (#9540)
ππ»ββοΈ reduced code with unset by weight reduction of 1% (#9575)
π fix warning for setValue test case
πͺ Improve handleSubmit
function by removing swallow runtime error
ππ»ββοΈ fix: revert fieldState.invalid deprecated (#9760)
πͺπΈ fix Spanish translation (#9737)
thanks to @SimplyLinn & @Mini-ghost @mango906 @amendezm
Published by bluebill1049 almost 2 years ago
π fix #9713 regression on validate function with react native (#9714)
thanks @Moshyfawn
Published by bluebill1049 almost 2 years ago
π fix #9709 calling setValue breaks future onChange calls from a Controller (#9710)
thanks @Moshyfawn
Published by bluebill1049 almost 2 years ago
π½ feature: validate function to include formValues (#9079)
type FormValues = {
number1: number;
number2: number;
};
// Making exported validate function isolated for validation
export function validateNumber(_: number, formValus: FormValues) {
return formValus.number1 + formValus.number2 === 3;
}
export default function App() {
const { register, handleSubmit } = useForm({
defaultValues: {
number1: 0,
number2: 0
}
});
return (
<form onSubmit={handleSubmit((data) => console.log(data))}>
<input
type="number"
{...register("number1", {
validate: validateNumber,
valueAsNumber: true
})}
/>
<input
type="number"
{...register("number2", {
validate: validateNumber,
valueAsNumber: true
})}
/>
<button>submit</button>
</form>
);
}
π€οΈ keep track of traversed types to avoid self-referencing while constructing paths for a type (#9540)
ππ»ββοΈ reduced code with unset by weight reduce of 1% (#9575)
π fix warning for setValue test case
πͺ Improve handleSubmit
function
thanks to @SimplyLinn & @Mini-ghost
Published by bluebill1049 almost 2 years ago
πββοΈ close #9684 revert UnPackAsyncDefaultValues
to avoid TS breaking change
Published by bluebill1049 almost 2 years ago
π€¦π»ββοΈfix #9661 regression on required valueAsNumber (#9662)
Published by bluebill1049 almost 2 years ago
π fix #9659 NaN prevent validation update (#9660)
π―οΈ close #9524 useWatch
return undefined value (#9653)
π adjust contributing document (#9641)
ππ» fix #9621 with the inline default value (#9622)
π©» docs: update contribution guidelines (#9605)
thanks to @Mini-ghost and @stefanpl
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 wellconst { formState: { isLoading } } = useForm({
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 #9525 add isLoading state for async defaultValues (#9526)
π fix #9581 incorrect type for array of string for message (#9584)
π fix #9571 validation issue with unregister input with valueAsNumber (#9572)
π fix(useWatch): default value for array of inputs (#9555)
π fix Controller example using deprecated as prop (#9535)
π fix #9521 isValidting property stuck (#9523)
π¨ feat: Migrate to pnpm (#9516)
πΉ fix #9509 incorrect type for WatchObserver (#9510)
π³ include flush root render method to createFormControl (#9479)
Huge thanks goes to @nvh95's work on PNPM and also thanks to @bell-steven's contribution
Published by bluebill1049 almost 2 years ago
ππ»ββοΈ close #9454 set isValid
and abort early for the error field (#9457)
π fix #9473 avoid update isDirty
& dirtyFields
unless flag is passed down (#9475)
thanks @blingblingredstar for the verify
Published by bluebill1049 almost 2 years ago
Revert "πͺΆ improve useFormContext perf by avoid reference re-create β¦ β¦with omit (#9407)"
Published by bluebill1049 almost 2 years ago
π fix fieldArray changes only notify relevant subscribers (#9448)
πͺΆ improve useFormContext
perf by avoid reference re-create with omit ( #9407)
ππ» fix potential watch() global state overwrite (#9450)
π¦ close #9410 improve UX when subscribe to both isValid and errors
state (#9413)
π₯¨ added eslint rule for no-extra-boolean-cast (#9449)
thanks to @elton-okawa
Published by bluebill1049 almost 2 years ago
π Improved async defaultValues
inference
const fetchData = async () => {
await sleep(1000)
return {
data: 'test'
}
}
- useForm<Awaited<ReturnTypeof<typeof fetchData>>>({
+ useForm({
defaultValues: fetchData, // will infer the promise return type
})
π Improved useForm
resetOptions to keep track of dirty input
- const { formState: { dirtyFields } } = useForm({
+ useForm({ // dirtyFields subscription is no longer required
values,
resetOptions: {
keepDirtyValues; true, // only non dirty input will receive data from the values update
}
})
πͺΆ improve useFormContext
perf by avoiding reference re-create with omit
π¦ close #9410 improve UX when subscribing to both isValid and errors
state (#9413)