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 their name prop. All the components will be connected with Formik form !

✌️ Handle onChange, onReset, OnSubmit, loading and errors for you.

✨ You can use Semantic Prompt Labels to prompt error by setting errorPrompt prop !!

Example

Code Sandbox (Login Form)

Code Sandbox (Register Form)

import React from 'react';
import { Formik } from 'formik';
import { Form, Input, SubmitButton, ResetButton } from 'formik-semantic-ui-react';

export const LoginForm = (props: any) => {
  const initialValues = {
    email: '',
    password: '',
  };

  return (
    <div>
      <Formik
        initialValues={initialValues}
        onSubmit={ ()=>{ console.log('Form Submit' )} }
      >
        <Form size="large">
          <Input
            name="email"
            placeholder="Email"
            errorPrompt
          />
          <Input
            name="password"
            type="password"
            placeholder="Password"
            errorPrompt
          />
          <SubmitButton fluid primary>
            Login
          </SubmitButton>
          <ResetButton fluid secondary>
            Reset
          </ResetButton>
        </Form>
      </Formik>
    </div>
  );
};

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

License

Apache 2.0