formik-semantic-ui-react

Simple wrappers for Formik and Semantic UI React.

Features:

:lock_with_ink_pen: TypeScript ready !!

:fire: Support Formik v2 & Semantic UI React v2 !!

:muscle: 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 !

:v: Handle onChange, onReset, OnSubmit, loading and errors for you.

:sparkles: 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