reactstrap-formik-yup

Building React Forms with Reactstrap, Formik and Yup. A simple reactstrap components that you can use with formik and yup.

Demo

Getting Started

Create your app. Follow the create-react-app instructions.

npx create-react-app my-app
cd my-app/
npm start

Add reactstrap-formik-yup

npm i reactstrap-formik-yup

Dependencies

Add reactstrap, formik, yup and classnames and bootstrap from NPM. reactstrap-formik-yup does not include Bootstrap so this needs to be installed as well

npm i reactstrap formik yup classnames bootstrap@4.6.0

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

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

or

Add bootstrap to your style.scss file and include style.scss in the src/index.js:

@import "~bootstrap/scss/bootstrap";

Import required reactstrap-formik-yup components within your custom component files:

import {InputComponent,	SelectComponent,RadioAndCheckBoxComponent} from 'reactstrap-formik-yup';

Once you create your form with a formik you can use them with formik Field

//Input
<Field
    required //Optional
    id='firstName'
    name='firstName'
    type='input'
    validation={false}//Optional - show or hide validation
    as={InputComponent}
    label='First name'
/>

//Select
<Field
    id='states'
    name='states'
    type='select'
    as={SelectComponent}
    label='State'
    defaultoption='Choose...'>
    {stateOptions.map(({ value, label }) => (
        <option key={value} value={value}>
            {label}
        </option>
    ))}
</Field>

//Multiple select
<Field
    required
    id='multiple'
    name='multiple'
    type='select'
    as={SelectComponent}
    label='Multiple select'
    multiple
>
    {stateOptions.map(({ value, label }) => (
        <option key={value} value={value}>
            {label}
        </option>
    ))}
</Field>

//Radio
//Options - required, showError
<Field
    inline
    id='radio'
    name='position'
    type='radio'
    value='Developer'
    as={RadioComponent}
    label='Developer'
/>

//Checkbox
//Options - required, showError
<Field
    id='terms'
    name='terms'
    as={CheckboxComponent}
    label='Terms and Conditions'
/>

Development

git clone https://github.com/angarev/reactstrap-formik-yup.git
npm install