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 of checked
• 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:

• https://turner-industries.github.io/formik-semantic-ui/
• https://codesandbox.io/s/ywjoykw95x

Components

Input Components

• Input
• Dropdown
  • options can be passed to component directly or through inputProps
• Checkbox
• TextArea

props:

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 Form onSubmit
• Automatically binds Formik isSubmitting for Semantic UI Form loading
• ignoreLoading - if you wish to disconnect the Forms loading prop from isSubmitting
• Accepts all <Formik /> props EXCEPT component
• 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:

• DatePicker
• FileUpload

Schema Driven

Basics

• Object keys map to component name prop
• Defaults to Input if type is unknown
• Unknown types pass their type to Input 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>