formik-reactstrap-widgets

Reactstrap style Formik form fields.

Installation

npm install --save formik-reactstrap-widgets

Dependencies

Installing formik-reactstrap-widgets does not include the following dependencies:

• bootstrap css
• formik
• reactstrap
• react
• react-dom

Install these dependencies with the follwoing commands:

npm install --save boostrap reactstrap formik react react-dom

Adding Bootstrap CSS

import Bootstrap CSS in the src/index.js file:

import 'bootstrap/dist/css/bootstrap.css'

Now you are ready to use the formik-reactstrap-widgets!

Usage

All form fields can be used inside a Formik component

import React from 'react'
import { Formik, Form } from 'formik'
import { Button } from 'reactstrap'
import {
  Input,
  DatePicker,
  Select,
  Radio
} from 'formik-reactstrap-widgets'

const MyForm = (props) => ( 
  <Formik
    onSubmit={action('form-submitted')}
    initialValues={{
      name: 'Jane Doe',
      birthday: '1/1/1900',
      gender: 'female'
    }}
    render={(props) => ( 
      <Form>
        <Input name='name' label='Name:' />
        <DatePicker name='birthday' label='Birthday:' />
        <Select name='gender' label='Gender:'>
          <option value='female'>Female</option>
          <option value='male'>Male</option>
          <option value='other'>Other</option>
        </Select>
        <Radio name='color' label='Favorite Color:'>
          <option value='red'>Red</option>
          <option value='green'>Green</option>
          <option value='blue'>Blue</option>
          <option value='other'>Other</option>
        </Radio>
        <Radio name='pet' button group label='Favorite Pet:'>
          <option value='dog'>Dog</option>
          <option value='cat'>Cat</option>
          <option value='fish'>Fish</option>
          <option value='other'>Other</option>
        </Radio>
        <Button>Submit</Button>
      </Form>
    )}
  />
)

default export MyForm