formik-semantic-ui-react
Simple wrappers for Formik
and Semantic UI React
.
Features:
🔏
TypeScript
ready !!
🔥 Support
Formik v2
&Semantic UI React v2
!!
💪 Easy to use. Just import form components from
formik-semantic-ui-react
and set theirname
prop. All the components will be connected withFormik
form !
✌️ Handle
onChange
,onReset
,OnSubmit
, loading and errors for you.
✨ You can use Semantic Prompt Labels to prompt error by setting
errorPrompt
prop !!
Example
;;; ;
Install
Using npm:
npm i formik-semantic-ui-react
Using Yarn:
yarn add formik-semantic-ui-react
Components
Name | Props |
---|---|
Checkbox | FieldProps & CheckboxProps & FieldErrorProps |
Form | FormProps |
Field | FieldProps |
FormikDebug | CSS Style Props |
Input | FieldProps & InputProps & FieldErrorProps & inputLabel |
Radio | FieldProps & RadioProps & FieldErrorProps |
Select | FieldProps & SelectProps & FieldErrorProps |
TextArea | FieldProps & TextAreaProps & FieldErrorProps |
Form Button
Name | Props | Description |
---|---|---|
SubmitButton | ButtonProps | It will trigger formik form onSubmit when on click |
ResetButton | ButtonProps | It will trigger formik form onReset when on click |
Props
FieldProps
Property | Required | Type | Default | Description |
---|---|---|---|---|
name | Yes | string |
Formik name property |
|
validate | No | Function |
Formik validate property |
|
fast | No | boolean |
false | Use Formik FastField |
inputLabel
You can use inline input label instead of field label.
Just pass string
or SemanticShorthandItem<LabelProps>
to inputLabel
.
FieldErrorProps
Property | Required | Type | Default | Description |
---|---|---|---|---|
errorPrompt | No | boolean | ErrorPromptConfig |
false | Prompt Error Label |
ErrorPromptConfig
Property | Required | Type | Default | Description |
---|---|---|---|---|
prompt | No | boolean |
true | Formik label's prompt property PS. To config basic & color, you have to set prompt to false |
basic | No | boolean |
Formik label's basic property |
|
color | No | SemanticCOLORS | Formik label's color property |
|
pointing | No | boolean | 'above' | 'below' | 'left' | 'right' |
'above' | Formik label's pointing property |