0.10.0 • Published 5 years ago
formik-semantic-ui v0.10.0
formik-semantic-ui
Wrappers for formik that simplify usage with semantic-ui-react.
Benefits:
- No need to manage form state
- handles
onChange
for you - Normalize all input events to provide a
value
(Ex:value: true
for Checkbox instead ofchecked
- Easily handle showing validation messages from client or server
- REDUCES BOILERPLATE
Install: npm i formik-semantic-ui
Ex:
<Form initialValues={{emailAddress:""}} onSubmit={(values, formikApi) => {
api.save(values);
formikApi.setFieldError('emailAdress', 'already in use')
}}>
<Input label="Email" name="emailAddress" />
<Button.Submit>Submit</Button.Submit>
<Button.Reset>Cancel</Button.Reset>
</Form>
Demo:
Components
Input Components
- Input
- Dropdown
options
can be passed to component directly or throughinputProps
- Checkbox
- TextArea
props:
Property | Required | Default | Desc |
---|---|---|---|
name | required | formik property key checks touched , errors , and values | |
id | optional | field_input_${count} | used to override default id put on component and associated via label |
label | optional | undefined | displays label on <Form.Field> |
inputProps | optional | {} | props to be passed to matching Semantic-UI component. Ex: {type:"password"} on <Input /> |
fieldProps | optional | {} | props passed to <Form.Field /> |
errorComponent | optional | span with class sui-error-message | Use a component that receive a message prop (can be used also as a render prop) |
inputRef | optional | ref function to get handle to dom element (does not work on DropDown) | |
fast | optional | false | whether to use formik's FastField (beneficial for large forms) |
Produce Semantic-UI:
<Form.Field error={checks errors}>
<label />
<CONNECTED_FORMIK_COMPONENT /> /* Example <Input /> */
<span className="sui-error-message">Some error message</span>
</Form.Field>
Form Helpers
<Form />
- Usage
- Simple Usage - Components as children
- Enhanced Usage - "Render Prop" similar to default Formik "Render Prop"
render={formikProps => <Form />}
- function as a child
- Automatically binds Formik
handleSubmit
for Semantic UI FormonSubmit
- Automatically binds Formik
isSubmitting
for Semantic UI Formloading
ignoreLoading
- if you wish to disconnect the Formsloading
prop fromisSubmitting
- Accepts all
<Formik />
props EXCEPTcomponent
- Accepts the following props from Semantic UI
<Form />
- className
- inverted
- size
Ex:
<Form
{...props}
onSubmit={handleSubmit}
loading={!props.ignoreLoading && isSubmitting}
/>
<Form.Children />
- alias for <React.Fragment>
to better show intent when using render prop
Buttons
- Button -
<Button {...props} type="button" />
- Button.Submit -
<Button primary {...props} type="submit" />
- Button.Reset -
<Button basic {...props} type="button" onClick={handleReset} />
Creating Custom Components
TODO: Create a better factory
Current:
Schema Driven
Basics
- Object
keys
map to componentname
prop - Defaults to
Input
if type is unknown - Unknown types pass their
type
toInput type={type}
- You can provide an initial value
- Very basic width via
fieldProps
TODO:
- Document this better
- Handle grouping
Usage:
<Form
onSubmit={this._handleSubmit}
schema={{
emailAddress: {
label: 'Email Address',
type: 'text',
value: 'justinobney@gmail.com',
},
ssn: {
label: 'SSN',
type: 'password',
fieldProps: {
width: 8,
},
},
notes: {
label: 'Notes',
type: 'textarea',
inputProps: {
rows: '6',
},
},
likes: {
label: 'Favorite Food',
type: 'dropdown',
options: [
{text: 'Pizza', value: 'pizza'},
{text: 'I am wrong', value: 'im-wrong'},
],
},
agree: {
label: 'I Agree',
type: 'checkbox',
},
}}
>
<Button.Submit>Submit</Button.Submit>
<Button.Reset>Cancel</Button.Reset>
</Form>
0.10.0
5 years ago
0.9.2
5 years ago
0.9.1
5 years ago
0.9.0
6 years ago
0.8.2
6 years ago
0.8.1
6 years ago
0.8.0
6 years ago
0.7.1
6 years ago
0.7.0
6 years ago
0.6.1
6 years ago
0.6.0
6 years ago
0.5.4
6 years ago
0.5.3
6 years ago
0.5.2
6 years ago
0.5.1
6 years ago
0.5.0
6 years ago
0.4.0
6 years ago
0.3.1
6 years ago
0.3.0
6 years ago
0.2.0
6 years ago
0.1.0
6 years ago