Let your reactstrap input component integrate seamlessly using formik
Installation
npm install bootstrap reactstrap formik formstrap
Or
yarn add bootstrap reactstrap formik formstrap
make sure both Formik, reactstrap and bootstrap installed
Just replace any Input / CustomInput from reactstrap to formstrap and you're done!
import Ract from 'react';
import { Formik, Form } from 'formik';
import { Input, Submit } from 'formstrap';
import { FormGroup } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.css';
const App = () => {
const initialValues = {
fname: 'laws',
};
const onSubmit = async (values, { setSubmitting }) => {
console.log(values);
// some await function ...
setSubmitting(false);
};
return (
<Formik initialValues={initialValues} onSubmit={onSubmit}>
<Form>
<FormGroup>
<Label>Name</Label>
<Input type="text" name="fname" />
</FormGroup>
<Submit withSpinner>Save</Submit>
</Form>
</Formik>
);
};All props is extends from default Reactstrap Input props here's the thing that we added.
- withLoading?: boolean - Input is disabled when submit / isSubmitting occur
- withFeedback?: boolean - Throw feedback when validation has error
- withLoading?: boolean - Button is disabled when submit / isSubmitting occur
- withSpinner?: boolean - Show spinner icon when submit / isSubmitting occur