reactstrap-formik-yup
v1.0.10
Published
A simple reactstrap components that you can use with formik and yup
Downloads
13
Maintainers
Readme
reactstrap-formik-yup
Building React Forms with Reactstrap, Formik and Yup. A simple reactstrap components that you can use with formik and yup.
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 [email protected]
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