reactstrap-formik-adapter

Bindings for using Formik with Reactstrap.

Usage no npm install needed!

<script type="module">
  import reactstrapFormikAdapter from 'https://cdn.skypack.dev/reactstrap-formik-adapter';
</script>

README

Quality Gate Status Security Rating Reliability Rating pipeline status

NPM

Bindings for using Formik with Reactstrap.

Fork of reactstrap-formik by shoaibkhan94.

Gitlab project, do not hesitate to open a issue for help.

Getting Started

npm install reactstrap-formik-adapter

Usage Examples

  • General example with Formik, Yup and Reactstrap here

How to

  • To use a simple text field :
import { ReactstrapInput,} from "reactstrap-formik-adapter";
import { Field } from "formik";

...

  <Field
    component={ReactstrapInput}
    label="Lastname"
    name="Lastname"
    id="Lastname"
  />

You can overload with a type of the types here. The Yup library also allows to check the type (as for emails, an example is available on the sandbox).

You can use flotating label, form inline, feedback or help text and checkbox.

  • To use select input field :
import { ReactstrapSelect,} from "reactstrap-formik-adapter";
import { Field } from "formik";

...

<Field
 component={ReactstrapSelect}
 label="Civility"
 name="Civility"
 id="Civility"
 inputprops={{
   name: "Civility",
   id: "civility",
   options: [
     {
       name: "Mr.",
       id: "Mr."
     },
     {
       name: "Ms.",
       id: "Ms."
     }
   ]
 }}
/>

You can also use the ReactstrapSelectRow component.