Formstrap

Let your reactstrap input component integrate seamlessly using formik

Demo

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

• Input
  • Input field (text, password, textarea, etc...)
  • Select
  • props
    • withLoading
    • withFeedback
• CustomInput
  • Input field (text, password, textarea, etc...)
  • Select
  • Checkbox
  • Radio
  • File Uploads
  • props
    • withLoading
    • withFeedback
• Submit
  • withLoading
  • withSpinner
• FormBlocker block form when loading (prevent input change from user)