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:

| Property | Required | Default | Desc | | -------------- | -------- | ----------------------------------- | --------------------------------------------------------------------------------------------------- | | name | required | | formik property key checks touched, errors, and values | | id | optional | field_input_${count} | used to override default id put on component and associated via label | | label | optional | undefined | displays label on <Form.Field> | | inputProps | optional | {} | props to be passed to matching Semantic-UI component. Ex: {type:"password"} on <Input /> | | fieldProps | optional | {} | props passed to <Form.Field /> | | errorComponent | optional | span with class sui-error-message | Use a component that receive a message prop (can be used also as a render prop) | | inputRef | optional | | ref function to get handle to dom element (does not work on DropDown) | | fast | optional | false | whether to use formik's FastField (beneficial for large forms) |

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: '[email protected]',
    },
    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>