Creare un componente di input con Formik e Amplify UI

Cosa ho imparato oggi? formik è un'utile libreria per reactjs per gestire form in varie modalità: attraverso hooks per sfruttare le sue potenzialità su form già esistenti oppure con dei componenti di Formik utili se stiamo costruendo dei form da zero.

Qualora però dobbiamo usare una libreria UI che dispone già di propri componenti di input, come ad esempio Amplify UI, oppure vogliamo implementare un nostro particolare input, si possono creare dei componenti wrapper per avere il meglio dei due mondi.
Useremo nel componente wrapper l'hook useField il quale restituendo la tupla di tre valori field, meta ed helper ci permette di

• impostare le prop base di un input tramite field (name, value tra i più importanti)
• gestire stato ed errori come touched ed error
• ottenere delle funzioni di helper per forzare valori, stato ed errori in modo programmatico

useFieldsi inizializza al minimo con una stringa che rappresenta il name che daremo all'input, oppure passando un oggetto con proprietà come value per preimpostare il valore del campo, handler per gestire eventi di change e blur, type dell'input e per alcuni tipi anche se da gestirlo come valore multiplo o checked (selezionato)

Vediamo un esempio di text input

type AmplifyFormikInputProps = {
  label: string;
  id: string;
  name: string;
  type?: string;
  disabled?: boolean;
  value?: any;
  className?: string;
  min?: number;
  max?: number;
};

const AmplifyFormikTextInput = (props: AmplifyFormikInputProps) => {
  const [field, meta] = useField(props);

  return (
      <TextField hasError={meta.touched && !!meta.error} errorMessage={meta.error} {...props} {...field} />
  );
};

Come si può notare useremo l'oggetto meta per visualizzare l'errore quando questo è presente e l'input è stato usato, e props e field per passare gli attributi necessari alla configurazione dell'input e alla sua stilizzazione.

Ora il componente è disponibile per essere utilizzato all'interno di un form gestito con Formik:

<Formik onSubmit={handleSubmit} initialValues={currentUser} validate={handleValidation} validateOnChange={true}>
 {(formik) => {
   return (
    <Form>
     <AmplifyFormikTextInput label="First name" id="firstname" name="firstname" />
     <AmplifyFormikTextInput label="Last name" id="lastname" name="lastname" />
...