Creating Custom Components

Notes

Add Wrappers have a corresponding function export (fieldToTextField, fieldToCheckbox etc.) that encapsulate the logic used to map formik props into the Material-UI shapes

Examples

Upper Casing Field

A simple test input that always uppercases the input

import MuiTextField from '@material-ui/core/TextField';
import { fieldToTextField, TextFieldProps } from 'formik-material-ui';
function UpperCasingTextField(props: TextFieldProps) {
const {
form: { setFieldValue },
field: { name },
} = props;
const onChange = React.useCallback(
event => {
const { value } = event.target;
setFieldValue(name, value ? value.toUpperCase() : '');
},
[setFieldValue, name]
);
return <MuiTextField {...fieldToTextField(props)} onChange={onChange} />;
}