@shipengine/formik-giger v1.9.19
@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.
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
8 months ago
9 months ago
1 year ago
10 months ago
1 year ago
10 months ago
10 months ago
11 months ago
1 year ago
11 months ago
11 months ago
1 year ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago