formstrap
v1.1.3
Published
[![npm version](https://badge.fury.io/js/formstrap.svg)](https://badge.fury.io/js/formstrap) [![reactstrap version](https://img.shields.io/npm/dependency-version/formstrap/peer/reactstrap)](https://github.com/reactstrap/reactstrap) [![formik version](http
Downloads
4
Readme
Formstrap
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
Basic usage
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>
);
};
Additional Props
All props is extends from default Reactstrap Input props here's the thing that we added.
<Input />
and <CustomInput />
- withLoading?: boolean - Input is disabled when submit / isSubmitting occur
- withFeedback?: boolean - Throw feedback when validation has error
<Submit />
- withLoading?: boolean - Button is disabled when submit / isSubmitting occur
- withSpinner?: boolean - Show spinner icon when submit / isSubmitting occur
@todo feature
- [x] Input
- [x] Input field (text, password, textarea, etc...)
- [x] Select
- [x] props
- [x] withLoading
- [x] withFeedback
- [x] CustomInput
- [x] Input field (text, password, textarea, etc...)
- [x] Select
- [x] Checkbox
- [x] Radio
- [x] File Uploads
- [x] props
- [x] withLoading
- [x] withFeedback
- [x] Submit
- [x] withLoading
- [x] withSpinner
- [ ] FormBlocker block form when loading (prevent input change from user)