📄 React hook for managing forms and inputs state
formOptions.validateOnBlur. (#110)formState when accessed via a validate or onChange
useFormState can now work with custom inputs using the new raw type. For example, controls like react-select or react-datepicker have onChange and value props that expect a custom value instead of an event.
For this kind of components, raw is used to keep track of a raw/custom value inside the form state.
import DatePicker from 'react-datepicker';
function Widget() {
const [formState, { raw }] = userFormState({ date: new Date() });
return (
<>
<DatePicker {...raw('date')} />
</>
);
}
It's now possible to update the state value of an input using the new formState.setField option.
function Form() {
const [formState, { text }] = useFormState();
function setNameField() {
// setting the input value manually
formState.setField('name', 'Mary Poppins');
}
return (
<>
<input {...text('name')} readOnly />
<button onClick={setNameField}>Set Name</button>
</>
)
}
It's also possible to clear a single input's value using formState.clearField.
Resetting the entire form state is now possible using formState.clear. This can be useful for resetting all fields after a form is submitted.
function Form() {
const [formState, { text, email }] = useFormState();
return (
<>
<input {...text("first_name")} />
<input {...text("last_name")} />
<input {...email("email")} />
<button onClick={formState.clear}>Clear All Fields</button>
</>
);
}
This release also bring a number of improvements to the TypeScript types for additional type safety.
A special thanks to all the contributors that helped make this release possible! 🙇
state.errorsIn 0.9.0, react-use-form-state added ability to specify custom validation errors. With this release, it's possible to add additional type safety to those custom errors retrieved via state.errors.
interface I18nError {
en: string;
fr: string;
}
interface FormFields {
username: string;
password: string;
}
interface FormErrors {
username?: I18nError;
password?: string;
}
const [formState, input] = useFormState<FormFields, FormErrors>();
formState.errors.username; // Will be undefined, or I18nError
When working with TypeScript, types of values, validity, touched and errors are now stricter, which means attempts to accessing properties that don't exists on these objects will result in an error at build time.
interface FormFields {
username: string;
password: string;
}
const [formState, input] = useFormState<FormFields>();
formState.fieldThatDoesNotExists // will throw a compiler error
A special thanks to all the contributors that helped make this release possible! 🙇♂️