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: ```js { api.save(values); formikApi.setFieldError('emailAdress', 'already in use') }}> Submit Cancel ``` 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: ```js FORMIKCOMPONENT /> / Example / Some error message ```

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: ```js ``` <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: ```js 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',

},

}}

Submit

Cancel ```