TypeScript fixes
- Use the same default for FormValues type in all declared types (#525)
- Replace empty object default type with any object (#526)
- Refactor getContext back to a simple context file (#524)
New Features
- Strongly typed field values (#530)
- Added tsx generic typings for Field, Form, and FormSpy components (#522)
For Typescript users, you can take advantage of JSX Generics, so you can specify the type of your form values or field value directly in the JSX call to Form, Field, or FormSpy. For Form, it will even infer the form values type if you provide initialValues.
Behold this code:
interface MyValues {
firstName: string
lastName: string
}
const initialValues: MyValues = {
firstName: 'Erik',
lastName: 'Rasmussen'
}
const onSubmit = (values: MyValues) => {
ajax.send(values)
}{/*
Typescript will complain if the type of initialValues is not
the same as what is accepted by onSubmit
*/}
<Form onSubmit={onSubmit} initialValues={initialValues}>
{({ handleSubmit, values }) => {
// 💥 Type of values is inferred from the type of initialValues 💥
return (
<form onSubmit={handleSubmit}>
{/* 😎 Field values are strongly typed using JSX generics 😎 */}
<Field<string> name="firstName" component={TextInput} />
<Field<string> name="lastName" component={TextInput} />
<Field<number> name="age" component={NumberInput} />
<button type="submit">Submit</button>
</form>
)
}}
</Form>