An opinionated implementation of Ionic input handling for @ionic/react with Formik

IonicInput.js

import React from 'react'
import { IonInput, IonItem, IonLabel } from '@ionic/react'
//SCSS
// .validationMessage {
//     display: none;
//     &.error {
//         display: block;
//         font-size: 0.8rem;
//         color: #ff3333;
//     }
// }

const defaultLabelProps = { position: 'floating' }
const defaultInputProps = {}
const IonicInput = ({
    labelText,
    labelProps = {},
    inputProps = {},
    type,
    name,
    values,
    touched,
    errors,
    setFieldValue,
    setFieldTouched,
}) => {
    const blurHandler = (e) => {
        setFieldValue(name, e.target.value)
        setFieldTouched(name)
    }
    const focusHandler = e => {
        setFieldTouched(name)
    }
    const changeHandler = e => {
        const usedValue = type!=='password' && e.target && e.target.value ? e.target.value : e.detail.value
        setFieldValue(name, usedValue)
        setFieldTouched(name)
    }
    const inputHandler = e => {
        setFieldValue(name, e.target.value)
    }
    return (
        <div>
            <IonItem className={errors && errors.email && touched.email ? 'ion-invalid' : ''}>
                <IonLabel {...{ ...defaultLabelProps, ...labelProps }}>{labelText}</IonLabel>
                <IonInput
                    type={type}
                    name={name}
                    value={values[name]}
                    onIonBlur={blurHandler}
                    onIonChange={changeHandler}
                    onIonFocus={focusHandler}
                    onIonInput={inputHandler}
                    {...{ ...defaultInputProps, ...inputProps }}
                />
            </IonItem>
            <div className={`validationMessage ${errors && errors[name] && touched[name] ? 'error' : ''}`}>
                {errors[name]}
            </div>
        </div>
    )
}

export default IonicInput

// USAGE
//    <IonicInput
//          name='pass'
//          type='password'
//          label='Your Password'
//          { ...formikProps}
//    />