Skip to content

v6.2.0

Compare
Choose a tag to compare
@erikras erikras released this 14 Jun 09:18
· 165 commits to master since this release
v6.2.0

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>

v6.1.0...v6.2.0