React-formik-ui NPM

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.

Markup, Styling and ClassNames

The markup for the components Input, 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 att all. This is intentionally, so you have the posibility 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 wrapper class (eg: Input component input-wrapper ), as well as the class form-element. you also can pass your own custom class to the wrapper of each component bay passing the className prop.

Anyhow, if you pass the styled prop to the Form component, minimal styling will be applied to add some structure to the form and each form element.

Installation

npm install --save react-formik-ui

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@latest

Form validations

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

npm install --save yup

Components and Examples

See the Styleguide here

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:

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 hanlde the data to be submited
  }

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

          </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:

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 hanlde the data to be submited
  }

  // 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 styled>

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

            <SubmitBtn />
          </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:

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 hanlde the data to be submited
  }

  // 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 styled>

            <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:

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 hanlde the data to be submited
  }

  // 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 styled>

            <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:

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 hanlde the data to be submited
  }

  // 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 styled>

            <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:

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 hanlde the data to be submited
  }

  // 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 styled>

            <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 aditional configuration options and layouts, please refere to ReactJS Datepicker. You can then pass the desired configuration as props just like you would on ReactJS Datepicker.

Props:

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 hanlde the data to be submited
  }

  // 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 styled>

            <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 aditional configuration options and layouts, please refere to react-dropzone.

Props:

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 hanlde the data to be submited
  }

  // 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 styled>

              <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:

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 hanlde the data to be submited
  }

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

            <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:

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 hanlde the data to be submited
  }

  // 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 styled>

            <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 submition, no further handler or configuration is needed.

Props:

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 hanlde the data to be submited
  }

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

            <SubmitBtn />

          </Form>
        )}
      />
    )
  }
}

Complete Form Example

import React, { Component } from 'react';
import { Formik } from 'formik'
import *  as yup from 'yup'
import {
  Form,
  Input,
  Datepicker,
  Select,
  Checkbox,
  Radio,
  Textarea,
  Button,
  SubmitBtn,
  Toggle,
  DropZone,
} from './components'
import logo from './logo.svg';
import './App.css';

class ExampleForm extends Component {
  onSubmit = data => {
    console.log(data)
  }

  // example of validation with yup
  getSchema = () => {
    return yup.object().shape({
      salutation: yup
        .string(),
      firstName: yup
        .string()
        .required('First name is required'),
      lastName: yup
        .string()
        .required('Last name is required'),
      email: yup
        .string()
        .email('Wrong format')
        .required('Email is required'),
      birthDay: yup
        .date(),
      maritalStatus: yup
        .string()
        .nullable(),
      driverLicense: yup
        .boolean(),
      pets: yup
        .boolean(),
      income: yup
        .string()
        .required('Income is required'),
      files: yup
        .array()
        .required('Image is required'),
      additionalInfo: yup
        .string(),
      termsAndConitions: yup
        .boolean(),
    });
  }

  render() {
    const styledDiv = {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      marginBottom: '15px'
    }

    return (
      <Formik
        initialValues={{
          salutation: 'Mr',
          firstName: '',
          lastName: '',
          email: '',
          birthDay: '',
          maritalStatus: '',
          driverLicense: false,
          pets: false,
          income: '',
          files: [],
          additionalInfo: '',
          termsAndConitions: false,
        }}
        validationSchema={this.getSchema}
        onSubmit={this.onSubmit}
        render={({ values }) => {
          return (
            <Form styled>
              <fieldset>
                <legend>Form Example:</legend>

                <Radio
                  name='salutation'
                  label='Salutation'
                  options={[
                    { value: 'Mr', label: 'Mr.' },
                    { value: 'Mrs', label: 'Mrs.' },
                    { value: 'Ms', label: 'Ms.' }
                  ]}
                />

                <Input
                  name='firstName'
                  label='First name'
                  required
                />

                <Input
                  name='lastName'
                  label='Last name'
                  required
                />

                <Input
                  name='email'
                  label='Enter your Email'
                  required
                />

                <Datepicker
                  name='birthDay'
                  label='Birthday'
                  dateFormat='D.M.YYYY'
                  placeholder='D.M.YYYY'
                  hint='Please enter your birth date'
                />

                <Select
                  name='maritalStatus'
                  label='Marital Status'
                  placeholder='Select an Option'
                  options={[
                    { value: '1', label: 'Married' },
                    { value: '2', label: 'Single' },
                    { value: '3', label: 'Divorced' },
                    { value: '4', label: 'Widowed' }
                  ]}
                />

                <div style={styledDiv}>
                  <div>
                    {`Do you have a drivers license ? ${values.driverLicense ? 'Yes' : 'No'}`}
                  </div>
                  <Toggle name='driverLicense' />
                </div>

                <div style={styledDiv}>
                  <div>
                    {`Do you own pets ? ${values.pets ? 'Yes' : 'No'}`}
                  </div>
                  <Toggle name='pets' />
                </div>

                <Input
                  name='income'
                  label={`What is your monthly income $${values.income}`}
                  type='range'
                  min='0'
                  max='10000'
                  step='500'
                  required
                />

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

                <Textarea
                  name='additionalInfo'
                  label='Aditional information'
                  hint='this is optional'
                />

                <Checkbox
                  name='termsAndConitions'
                  label='Terms and Conditions'
                  text='Click to accept the terms and conditions'
                />

                <SubmitBtn disabled={!values.termsAndConitions} />
                <Button onClick={(() => alert('Cancel'))}>Cancel</Button>
              </fieldset>
            </Form>
          );
        }}
      />
    );
  }
}

export default ExampleForm;