2.0.1 • Published 6 years ago
define-form v2.0.1
Define Form
Define form offers alternative typescript bindings for final-form. The key difference is that the form data is now a strongly typed object, rather than an any. This makes the initialValues
config option required.
Installation
yarn add define-form
Usage
import defineForm from 'define-form';
interface FormState {
name: string;
}
type ErrorValue = string;
const form = defineForm<FormState, ErrorValue>({
initialValues: {name: ''}, // required
onSubmit, // required
validate
})
// Subscribe to form state updates
const unsubscribe = form.subscribe(
formState => {
// Update UI
},
{ // FormSubscription: the list of values you want to be updated about
dirty: true,
valid: true,
values: true
}
})
// Subscribe to field state updates
const unregisterField = form.registerField(
'username',
fieldState => {
// Update field UI
const { blur, change, focus, ...rest } = fieldState
// In addition to the values you subscribe to, field state also
// includes functions that your inputs need to update their state.
},
{ // FieldSubscription: the list of values you want to be updated about
active: true,
dirty: true,
touched: true,
valid: true,
value: true
}
)
// Submit
form.submit() // only submits if all validation passes
If you like this, you may also want to check out react-define-form
License
MIT