0.10.0
🚀 Features
Added Support for Custom Input Components
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')} />
</>
);
}Further reading:
Setting Input Values Manually
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.
Further reading:
Resetting Form State
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>
</>
);
}Further reading:
✨ Improvements
Improved Type Safety
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! 🙇