jpesg / react-formik-ui

A simple component library, composed out of pure HTML form elements to make your live easier composing forms with Formik and React

React-Formik-UI

Overview

React-Formik-UI is a simple component library, composed out of pure HTML form elements like: form, input, select, checkbox, radio and textarea.

The Idea behind React-Formik-UI is to make the composition of forms with React and Formik even easier, so you don't have to write any HTML markup or extra components for your forms.

Each component makes use of Formiks context, there for you need to have Formik installed in your project.

NEW in v3:

• MODE option: The themed and structured props are obsolete and got replaced by the mode prop. Refer to Markup, Styling and ClassNames.
• Dropzone: The DropZone component now handles 3 additional props : multiple with default value set to true, if set to false it allows for single file upload only; withClearButton that enables a Button for clearing out added files and clearButtonText to set the text to shown on the Clear Button .
• PhoneInput: Now supports the withCountryMeta prop , that returns an object not only with the phone number but also with the selected country information
• className: The className Prop on each component now adds the css class directly to the component instead of the wrapper div, so libraries like Bootstrap can be used to style the form component.
• Overall more stability and less bugs, as well as a complete rewrite of the css for better understanding of the code.

Markup, Styling and ClassNames

The markup for the components Input, PhoneInput, Select, Checkbox, Radio, Textarea, Datepicker and DropZone consists of a wrapper div, label, the main component, hint, and error message.

By default all component have NO styling applied at all.
This is intentionally, so you have the possibility to apply your own styling.
All the components used in the Form are scoped by the default classes, situated on the Form component, react-formik-ui form-wrapper

Each component has its corresponding component class (eg: PhoneInput component phoneInput ) followed a level deeper by its wrapper class (eg: phoneInput component phoneInput-wrapper ), as well as the class form-element.

You can pass the style prop on each component, to add custom inline styles to the component div for each component.

The className Prop can be passed on each component to add a css class directly to the component instead of the wrapper div, so libraries like Bootstrap can be used to style the form component.

The Mode prop: If you pass the mode prop to the Form component with structured as value, a minimal styling will be applied to add some structure to each form-element.

In case you pass the value themed through the mode prop on the Form component, the React-Formik-Ui Theme will be applied

MIGRATION v2 to v3:

• If you used the structured or themed prop on the Form component you now need to change it to mode='structured' or mode='themed'.
• In case you used custom css classes through the className prop, you might need to adjust some of your custom styles since the className has been moved form the wrapper div to the main component.

Installation

Note: React Formik UI makes use of the recently released react Hooks API, therefore make sure that your project uses the latest React version

npm install --save react-formik-ui

Support

If you like the project and want to support my work, you can buy me a coffee :)

Usage

Peer Dependency

React-Formik-UI has a Peer dependency of Formik.
This means that you need to add Formik to your project to make use of React-Formik-UI.

npm install --save formik

Form validations

To validate the form fields, the use of Yup is recommended.

npm install --save yup

See the Styleguide with Demo and Examples here

Components Documentation and Examples

• Form
• Autocomplete
• Input
• PhoneInput
• Select
• Radio
• Checkbox
• Textarea
• DatePicker
• DropZone
• Button
• Toggle
• SubmitBtn
• Complete Form Example

Form

The Form component, like in a normal HTML form is the main wrapper for your form.
It renders with the classNames react-formik-ui and form-wrapper.
A custom class can be passed with the className prop.

You don't need to pass an onSubmit handler, since this is already handled under the hood.

Props:

Name	Type	Default	Description
className	string	null	Adds a custom class to the form
mode	string	default	One of 'default', 'structured', 'themed'

Demo

Code example:

import React, { Component } from 'react'
import { Formik } from 'formik'
import { Form } from 'react-formik-ui'

class Example extends Component {

  onSubmit = data => {
    // here you handle the data to be submitted
  }

  render () {
    return (
      <Formik
        initialValues={ /* inital values setup */ }
        validationSchema={ /* validation schema setup */ }
        onSubmit={this.onSubmit}
        render={() => (
          <Form mode='structured'>

          </Form>
        )}
      />
    )
  }
}

Autocomplete

The Autocomplete component renders with the classNames form-element and autocomplete-wrapper.
A custom class can be passed through the className prop.

Props:

Name	Type	Default	Description
name	string	Required	Sets the Name of the input field of the Autocomplete component
suggestions	array	required	Array of suggestions to be searched in
className	string	null	Adds a custom class to the input element of the Autocomplete component
style	object	null	Adds a custom inline styles to the Autocomplete wrapper div
disabled	boolean	false	Disables the Autocomplete
hint	string	null	Sets a hint text after/below the Autocomplete Field
id	string	null	Sets an Id for the Autocomplete Field, if not passed, the id will be the name
label	string	null	Sets the main Label for the Autocomplete Field
placeholder	string	null	Sets the Placeholder text
required	boolean	false	Sets the field as required, if label is passed, an * is added to the end of the main label. Validation will only work if you pass the required() method in the yup validation schema

Demo

Code example:

import React, { Component } from 'react'
import { Formik } from 'formik'
import * as yup from 'yup';

import { Form, Autocomplete, SubmitBtn } from 'react-formik-ui'

class Example extends Component {

  onSubmit = data => {
    // here you handle the data to be submitted
  }

  // example of validation with yup
  getSchema = () => {
    return yup.object().shape({
      nameField: yup
        .string()
        .required('Name Is required'),
    })
  }

  render () {
    return (
      <Formik
        initialValues={{
          searchFiled: ''
        }}
        validationSchema={this.getSchema}
        onSubmit={this.onSubmit}
        render={() => (
          <Form mode='structured'>

           <Autocomplete
              label='Search'
              name="searchFiled"
              suggestions={[
                'Afghanistan',
                'Aland Islands',
                'Albania',
                'Algeria',
                'American Samoa',
                'Andorra',
                'Angola',
                'Anguilla',
                'Antarctica',
                'Antigua and Barbuda',
                'Argentina',
                'Armenia',
                'Aruba',
                'Australia',
                'Austria',
                'Azerbaijan',
                'Bahamas',
                'Bahrain',
                'Bangladesh',
                'Barbados',
                'Belarus',
                'Belgium',
                'Belize',
                'Benin',
                'Bermuda',
                'Bhutan',
                'Bolivia, Plurinational State of',
                'Bonaire, Sint Eustatius and Saba',
                'Bosnia and Herzegovina',
                'Botswana',
                'Bouvet Island',
                'Brazil',
                'British Indian Ocean Territory',
                'Brunei Darussalam',
              ]}
            />

            <SubmitBtn />
          </Form>
        )}
      />
    )
  }
}

Input

The Input component renders with the classNames form-element and input-wrapper.
A custom class can be passed through the className prop.

Props:

Name	Type	Default	Description
className	string	null	Adds a custom class to the input element of the Input component
style	object	null	Adds a custom inline styles to the Input wrapper div
disabled	boolean	false	Disables the Input Field
hint	string	null	Sets a hint text after/below the Input Field
id	string	null	Sets an Id for the Input Field, if not passed, the id will be the name
label	string	null	Sets the main Label for the Input Field
name	string	Required	Sets the Name of the Input Field
placeholder	string	null	Sets the Placeholder text
required	boolean	false	Sets the field as required, if label is passed, an * is added to the end of the main label. Validation will only work if you pass the required() method in the yup validation schema
type	string	text	Defines the type of the Input Filed

Demo

Code example:

import React, { Component } from 'react'
import { Formik } from 'formik'
import * as yup from 'yup';

import { Form, Input, SubmitBtn } from 'react-formik-ui'

class Example extends Component {

  onSubmit = data => {
    // here you handle the data to be submitted
  }

  // example of validation with yup
  getSchema = () => {
    return yup.object().shape({
      nameField: yup
        .string()
        .required('Name Is required'),
    })
  }

  render () {
    return (
      <Formik
        initialValues={{
          nameField: ''
        }}
        validationSchema={this.getSchema}
        onSubmit={this.onSubmit}
        render={() => (
          <Form mode='structured'>

            <Input
              name='nameField'
              label='Input field main label'
              placeholder='Your Name'
              hint='This is a hint'
              required
            />

            <SubmitBtn />
          </Form>
        )}
      />
    )
  }
}

PhoneInput

The PhoneInput component renders with the classNames form-element and phoneInput-wrapper.
A custom class can be passed through the className prop.

Props:

Name	Type	Default	Description
name	string	Required	Sets the Name of the Input Field
id	string	null	Sets an Id for the Input Field, if not passed, the id will be the name
className	string	null	Adds a custom class to the input/select element of the PhoneInput component
label	string	null	Sets the main Label for the Input Field
hint	string	null	Sets a hint text after/below the Input Field
buttonFlagStyles	object	null	Style object that overrides the styles of the Flag shown in the button
defaultCountry	string	null	Sets the default country (use iso alpha-2 country code e.g 'us', 'gb', 'fr')
disabled	boolean	false	Disables the PhoneInput Field
required	boolean	false	Sets the field as required, if label is passed, an * is added to the end of the main label. Validation will only work if you pass the required() method in the yup validation schema
format	string	'INTERNATIONAL'	One of: 'INTERNATIONAL', 'NATIONAL'. Sets the format of the entered phone number, in case of 'NATIONAL' the defaultCountry must be set as well
listFlagStyles	object	null	Style object that overrides the styles of the Flag shown in the country dropdown
placeholder	string	null	Sets the Placeholder text
preferredCountries	Array	null	Lets you restrict the country dropdown to a specific list of countries (use iso alpha-2 country code e.g 'us', 'gb', 'fr')
regions	String / Array	[]	Lets you restrict the country dropdown to a list of countries in the specified regions
style	object	null	Adds a custom inline styles to the Autocomplete wrapper div
withCountryMeta	boolean	false	changes the retuned value into an Object that contains the phone number and country meta information eg.: { phoneNumber: '[phone]', country: { name: 'Germany (Deutschland)', iso2: 'de' } } In case of use the Formik initialValue for the PhoneInput needs to be an Object exactly like this: { phoneNumber: '', country: { name: '', iso2: '' }

Demo

import { Formik } from 'formik'
import { Form, PhoneInput } from 'react-formik-ui';

<Formik
  initialValues={{
    phoneNr1: ''
  }}
  onSubmit={data => (alert(JSON.stringify(data)))}
  render={() => (
    <Form>
      <PhoneInput
        name='phoneNr1'
        label='Phone Nr.'
        placeholder='[phone]'
        hint='This is a hint'
      />
    </Form>
  )}
/>

Select

The Select component renders with the classNames form-element and select-wrapper.
A custom class can be passed through the className prop.

Props:

Name	Type	Default	Description
className	string	null	Adds a custom class to the select element of the Select component
style	object	null	Adds a custom inline styles to the Select wrapper div
disabled	boolean	false	Disables the Select Field
hint	string	null	Sets a hint text after/below the Select component
id	string	null	Sets an Id for the Select Field, if not passed, the id will be the name
label	string	null	Sets the main Label for the Select Field
name	string	Required	Sets the Name of the Select Field
options	array	Required	Array in the shape of [ { value: string or number, label: string } ]
placeholder	string	null	Sets a Placeholder as the first option with no value
required	boolean	false	Sets the field as required, if label is passed, an * is added to the end of the main label. Validation will only work if you pass the required() method in the yup validation schema

Demo

Code example:

import React, { Component } from 'react'
import { Formik } from 'formik'
import * as yup from 'yup';

import { Form, Select, SubmitBtn } from 'react-formik-ui'

class Example extends Component {

  onSubmit = data => {
    // here you handle the data to be submitted
  }

  // example of validation with yup
  getSchema = () => {
    return yup.object().shape({
      dropdown: yup
        .string(),
    })
  }

  render () {
    return (
      <Formik
        initialValues={{
          dropdown: ''
        }}
        validationSchema={this.getSchema}
        onSubmit={this.onSubmit}
        render={() => (
          <Form mode='structured'>

            <Select
              name='dropdown'
              label='Select options main label'
              placeholder='Select an Option'
              options={[
                { value: '1', label: 'Option 1' },
                { value: '2', label: 'Option 2' },
                { value: '3', label: 'Option 3' }
              ]}
            />

            <SubmitBtn />
          </Form>
        )}
      />
    )
  }
}

Radio

The Radio component renders with the classNames form-element and radio-wrapper.
A custom class can be passed through the className prop.

Props:

Name	Type	Default	Description
className	string	null	Adds a custom class to each input element of the Radio component
style	object	null	Adds a custom inline styles to the Radio wrapper div
disabled	boolean	false	Disables the Radio Fields
inline	boolean	false	Displays the radio option inline from left to right
hint	string	null	Sets a hint text after/below the Radio component
label	string	null	Sets the main Label for the Radio Fields
name	string	Required	Sets the Name of the Radio Fields
options	array	Required	Array in the shape of [ { value: string or number, label: string } ]
required	boolean	false	Sets the field as required, if label is passed, an * is added to the end of the main label. Validation will only work if you pass the required() method in the yup validation schema

Demo

Code example:

import React, { Component } from 'react'
import { Formik } from 'formik'
import * as yup from 'yup';

import { Form, Radio, SubmitBtn } from 'react-formik-ui'

class Example extends Component {

  onSubmit = data => {
    // here you handle the data to be submitted
  }

  // example of validation with yup
  getSchema = () => {
    return yup.object().shape({
      radioOptions: yup
        .string(),
    })
  }

  render () {
    return (
      <Formik
        initialValues={{
          radioOptions: ''
        }}
        validationSchema={this.getSchema}
        onSubmit={this.onSubmit}
        render={() => (
          <Form mode='structured'>

            <Radio
              name='radioOptions'
              label='Radio options main label'
              options={[
                { value: '1', label: 'Option 1' },
                { value: '2', label: 'Option 2' },
                { value: '3', label: 'Option 3' }
              ]}
            />

            <SubmitBtn />
          </Form>
        )}
      />
    )
  }
}

Checkbox

The Checkbox component renders with the classNames form-element and checkbox-wrapper.
A custom class can be passed through the className prop.

Props:

Name	Type	Default	Description
className	string	null	Adds a custom class to the input element of the Checkbox component
style	object	null	Adds a custom inline styles to the Checkbox wrapper div
disabled	boolean	false	Disables the Checkbox
hint	string	null	Sets a hint text after/below the Checkbox
id	string	null	Sets an Id for the Checkbox, if not passed, the id will be the name
label	string	null	Sets the main Label for the Checkbox
name	string	Required	Sets the Name of the Checkbox
required	boolean	false	Sets the Checkbox as required, if label is passed, an * is added to the end of the main label. Validation will only work if you pass the required() method in the yup validation schema
text	string / node	null	Sets the text shown beside the checkbox

Demo

Code example:

import React, { Component } from 'react'
import { Formik } from 'formik'
import * as yup from 'yup';

import { Form, Checkbox, SubmitBtn } from 'react-formik-ui'

class Example extends Component {

  onSubmit = data => {
    // here you handle the data to be submitted
  }

  // example of validation with yup
  getSchema = () => {
    return yup.object().shape({
      agreement: yup
        .boolean(),
    })
  }

  render () {
    return (
      <Formik
        initialValues={{
          agreement: false
        }}
        validationSchema={this.getSchema}
        onSubmit={this.onSubmit}
        render={() => (
          <Form mode='structured'>

            <Checkbox
              name='agreement'
              label='Checkbox main label'
              text='Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
            />

            <SubmitBtn />
          </Form>
        )}
      />
    )
  }
}

Textarea

The Textarea component renders with the classNames form-element and textarea-wrapper.
A custom class can be passed through the className prop.

Props:

Name	Type	Default	Description
className	string	null	Adds a custom class to the textarea element of the Textarea component
style	object	null	Adds a custom inline styles to the Textarea wrapper div
disabled	boolean	false	Disables the Textarea
hint	string	null	Sets a hint text after/below the Textarea
id	string	null	Sets an Id for the Textarea, if not passed, the id will be the name
label	string	null	Sets the main Label for the Textarea
name	string	Required	Sets the Name of the Textarea
placeholder	string	null	Sets the Placeholder text
required	boolean	false	Sets the field as required, if label is passed, an * is added to the end of the main label. Validation will only work if you pass the required() method in the yup validation schema

Demo

Code example:

import React, { Component } from 'react'
import { Formik } from 'formik'
import * as yup from 'yup';

import { Form, Textarea, SubmitBtn } from 'react-formik-ui'

class Example extends Component {

  onSubmit = data => {
    // here you handle the data to be submitted
  }

  // example of validation with yup
  getSchema = () => {
    return yup.object().shape({
      comment: yup
        .string(),
    })
  }

  render () {
    return (
      <Formik
        initialValues={{
          comment: ''
        }}
        validationSchema={this.getSchema}
        onSubmit={this.onSubmit}
        render={() => (
          <Form mode='structured'>

            <Textarea
              name='comment'
              label='Write a comment'
            />

            <SubmitBtn />
          </Form>
        )}
      />
    )
  }
}

Datepicker

The Datepicker component uses ReactJS Datepicker under the hood.
It renders with the classNames form-element and datePicker-wrapper.
A custom class can be passed through the className prop.

For additional configuration options and layouts, please refer to ReactJS Datepicker.
You can then pass the desired configuration as props just like you would on ReactJS Datepicker.

Props:

Name	Type	Default	Description
id	string	null	Sets an Id for the Datepicker, if not passed, the id will be the name
className	string	null	Adds a custom class to the React-Datepicker component
style	object	null	Adds a custom inline styles to the Datepicker wrapper div
dateFormat	string / Array of strings	dd.MM.yyyy	Sets the desired date format.
disabled	boolean	false	Disables the Datepicker Field
hint	string	null	Sets a hint text after/below the Datepicker Field
label	string	null	Sets the main Label for the Datepicker Field
name	string	Required	Sets the Name of the Datepicker Field
placeholder	string	null	Sets the Placeholder text
required	boolean	false	Sets the field as required, if label is passed, an * is added to the end of the main label. Validation will only work if you pass the required() method in the yup validation schema

Demo

Code example:

import React, { Component } from 'react'
import { Formik } from 'formik'
import * as yup from 'yup';

import { Form, Datepicker, SubmitBtn } from 'react-formik-ui'

class Example extends Component {

  onSubmit = data => {
    // here you handle the data to be submitted
  }

  // example of validation with yup
  getSchema = () => {
    return yup.object().shape({
      birthday: yup
        .date(),
    })
  }

  render () {
    return (
      <Formik
        initialValues={{
          birthday: ''
        }}
        validationSchema={this.getSchema}
        onSubmit={this.onSubmit}
        render={() => (
          <Form mode='structured'>

            <Datepicker
              name='birthday'
              label='Birthdate'
            />

            <SubmitBtn />
          </Form>
        )}
      />
    )
  }
}

DropZone

The DropZone component uses react-dropzone under the hood.
It renders with the classNames form-element and dropzone-wrapper.
A custom class can be passed through the className prop.

For additional configuration options and layouts, please refer to react-dropzone.

Props:

Name	Type	Default	Description
accept	string	image/*	Allow specific types of files. See https://github.com/okonet/attr-accept for more information. Keep in mind that mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows. In some cases there might not be a mime type set at all. See: react-dropzone/react-dropzone#276
name	string	Required	Sets the Name of the DropZone Field
id	string	null	Sets an Id for the DropZone Field, if not passed, the id will be the name
className	string	null	Adds a custom class to the React-DropZone component
style	object	null	Adds a custom inline styles to the Dropzone wrapper div
disabled	boolean	false	Disables the DropZone Field
disabledText	string	File upload disabled	text shown as placeholder if DropZone is disabled
fileInfo	boolean	false	Shows the number of accepted and rejected files after each drop
hint	string	null	Sets a hint text after/below the DropZone Field
label	string	null	Sets the main Label for the DropZone Field
placeholder	string	Drop some files here.	Sets the Placeholder text
required	boolean	false	Sets the field as required, if label is passed, an * is added to the end of the main label. Validation will only work if you pass the required() method in the yup validation schema
zoneActiveText	string	Drop file(s) here	Sets the text to be shown when dragging files over the drop zone
withClearButton	boolean	false	Enables a Clear button below the Dropbox, that enables you to clear out all the files you added to the Dropbox
clearButtonText	string	Clear Files	Sets the text to be shown on the Clear Button
multiple	boolean	true	Allow drag 'n' drop (or selection from the file dialog) of multiple files. Set to false to enable Single file upload

Demo

Code example:

import React, { Component } from 'react'
import { Formik } from 'formik'
import * as yup from 'yup';

import { Form, DropZone, SubmitBtn } from 'react-formik-ui'

class Example extends Component {

  onSubmit = data => {
    // here you handle the data to be submitted
  }

  // example of validation with yup
  getSchema = () => {
    return yup.object().shape({
      files: yup
        .array()
    })
  }

  render () {
    return (
      <Formik
        initialValues={{
          files: []
        }}
        validationSchema={this.getSchema}
        onSubmit={this.onSubmit}
        render={() => (
          <Form mode='structured'>

              <DropZone
                name='files'
                label='Image upload'
              />

            <SubmitBtn />
          </Form>
        )}
      />
    )
  }
}

Button

The Button component renders with the className btn.
A custom class can be passed through the className prop.

Props:

Name	Type	Default	Description
children	string / node	null	Renders the children passed to the button
className	string	null	Adds a custom class to the button
disabled	boolean	false	Disables the button
onClick	function	Required	Sets the onClick handler for the button
type	string	button	Sets the type for the button

Demo

Code example:

import React, { Component } from 'react'
import { Formik } from 'formik'
import * as yup from 'yup';

import { Form, Button } from 'react-formik-ui'

class Example extends Component {

  onSubmit = data => {
    // here you handle the data to be submitted
  }

  render () {
    return (
      <Formik
        initialValues={ /* inital values setup */ }
        validationSchema={ /* validation schema setup */ }
        onSubmit={this.onSubmit}
        render={() => (
          <Form mode='structured'>

            <Button onClick={(() => alert('Cancel'))}>
              Cancel
            </Button>

          </Form>
        )}
      />
    )
  }
}

Toggle

The Toggle button component, is the only component so far who has its own styling.
Since it uses the Button component, it renders with the classNames btn and also toggle-btn.
A custom class can be passed through the className prop.

Props:

Name	Type	Default	Description
id	string	null	Sets an Id for the Toggle button, if not passed, the id will be the name
className	string	null	Adds a custom class to the Toggle button wrapper-div
style	object	null	Adds a custom inline styles to the Toggle switch wrapper div
disabled	boolean	false	Disables the Toggle button
name	string	Required	Sets the Name of the Toggle button

Demo

Code example:

import React, { Component } from 'react'
import { Formik } from 'formik'
import * as yup from 'yup';

import { Form, Toggle, SubmitBtn } from 'react-formik-ui'

class Example extends Component {

  onSubmit = data => {
    // here you handle the data to be submitted
  }

  // example of validation with yup
  getSchema = () => {
    return yup.object().shape({
      toggleBtn: yup
        .boolean(),
    })
  }

  render () {
    return (
      <Formik
        initialValues={{
          toggleBtn: false
        }}
        validationSchema={this.getSchema}
        onSubmit={this.onSubmit}
        render={() => (
          <Form mode='structured'>

            <Toggle name='toggleBtn'/>

            <SubmitBtn />
          </Form>
        )}
      />
    )
  }
}

SubmitBtn

The SubmitBtn component renders with the classNames btn and submit-btn.
A custom class can be passed through the className prop.

By default the SubmitBtn handles the submission, no further handler or configuration is needed.

Props:

Name	Type	Default	Description
className	string	null	Adds a custom class to the SubmitBtn
disabled	boolean	false	Disables the SubmitBtn
text	string / node	Submit	Sets the text shown on the SubmitBtn
type	string	submit	Sets the type for the SubmitBtn

Demo

Code example:

import React, { Component } from 'react'
import { Formik } from 'formik'
import * as yup from 'yup';

import { Form, SubmitBtn } from 'react-formik-ui'

class Example extends Component {

  onSubmit = data => {
    // here you handle the data to be submitted
  }

  render () {
    return (
      <Formik
        initialValues={ /* inital values setup */ }
        validationSchema={ /* validation schema setup */ }
        onSubmit={this.onSubmit}
        render={() => (
          <Form mode='structured'>

            <SubmitBtn />

          </Form>
        )}
      />
    )
  }
}

License

MIT © KaiHotz