@shipengine/formik-giger

Bindings for using Formik with Giger.

Usage

Check stories for examples on how to integrate this package in your application.

FormField

With Design team we think about a "global" solution for the spaces (margin / paddings) at the Input component (Giger) so thats why FormField component exists, this component accepts any children (Input, Select, etc) and a message interface so we can forget to declare the Input + FieldMessage paddings across our codebase.

This component (FormField - Phavior) it's easy to use:

import { Field } from 'formik';
import { FormField, Input } from '@shipengine/formik-giger';

<FormField name="username">
    <Field component={Input} label="username" />
</FormField>;

This way, (just like the other Input, TextArea ... components inside this package) Formik will handle the onChange, onBlur handlers among other things. Plus: this will render the error message when there is an error, but you can also pass a custom message to render:

import { Field } from 'formik';
import { FieldMessageType } from '@shipengine/giger';
import { FormField, Input } from '@shipengine/formik-giger';

<FormField
    name="username"
    message={{
        type: FieldMessageType.INFO,
        content: 'Use a valid username',
    }}
>
    <Field component={Input} label="username" />
</FormField>;

Take in mind that errors are top priority that means that an error will always be rendered before any custom message you may pass. When the error it's gone, the default message will render.