useField + type safety for name?

[PascalLuginbuehl]

I work at Siemens and we are also using Material-UI with Formik. For that reason, we have developed our own internal library.

We would like to contribute to your project.

Our requirements:

• standalone components with useFields()
• type safety for the name field via. generic

Currently this library does not make use of these requirements. Are you interested to change this?

We would provide pull requests similar to this.

(Stripped library code)

import React from "react"
import MuiTextField, { TextFieldProps as MuiTextFieldProps } from "@material-ui/core/TextField"
import { useFormikContext, useField, FieldValidator } from "formik"

export interface FormikTextFieldProps<FormValues> extends Omit<MuiTextFieldProps, "error" | "onChange" | "name" | "value"> {
    validate?: FieldValidator

    name: keyof FormValues & string
}

export default function FormikTextField<FormValues>(props: FormikTextFieldProps<FormValues>) {
    const {
        disabled,
        helperText,

        /* eslint-disable @typescript-eslint/no-unused-vars */
        // removed from otherProps, only useField
        validate,
        /* eslint-enable @typescript-eslint/no-unused-vars */

        children,

        // Same as Autocomplete renderInput(), mostly used with fullWidth
        fullWidth = true,

        ...otherProps
    } = props

    const [field, meta] = useField<string>({
        name: props.name,
        validate: validate,
    })

    const { isSubmitting } = useFormikContext()

    const fieldError = meta.error
    const showError = meta.touched && !!fieldError

    return <MuiTextField
        disabled={disabled != undefined ? disabled : isSubmitting}
        error={showError}
        helperText={showError ? fieldError : helperText}
        fullWidth={fullWidth}

        {...otherProps}
        {...field}
    >
        {children}
    </MuiTextField>
}

[cliedeman]

Hi @PascalLuginbuehl,

I previously attempted a migration to useField and abandoned it due to these reasons.

The generic improvement for names is a welcome change

Ciaran

[PascalLuginbuehl]

FastField is indeed currently a problem for us.
With the upcoming Formik 3.0 release there should be a major change in how useField/useFastField works.
jaredpalmer/formik#2749

With 3.0 it should be possible to make standalone components. Do you agree with that approach?
We will wait for the Formik 3.0 release and then contribute to your project.

[cliedeman]

Hi @PascalLuginbuehl sorry for the delayed reply. I thought formik 3 would be closer but it seems to be held up by the context selector RFC.

reactjs/rfcs#119

Happy to revist all of this when formik 3 comes out