formik-semantic-ui-react v2.0.0

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

Form Button

Props

FieldProps

inputLabel

You can use inline input label instead of field label.

Just pass string or SemanticShorthandItem<LabelProps> to inputLabel.

FieldErrorProps

ErrorPromptConfig

License

Apache 2.0