Formik-Strap

This library is intended to be an updated version of tools like formstrap, which combine reactstrap styles and components with the utilities of formik. This library currently uses reactstrap 9.1.4 (bootstrap v5.1.1) and formik v2.2.9. This library is built on TypeScript and carries over all of the properties of formik and reactstrap inputs.

I've created an example GitHub repo, which is linked to a codesandbox example.

Installation

To install the package:

npm install bootstrap reactstrap formik formik-strap

OR

yarn add bootstrap reactstrap formik formik-strap

Usage

The basic usage is similar to how you would normally use formik:

1import React from 'react';
2import { Form, Formik } from 'formik';
3import { Field, Submit } from 'formik-strap';
4import 'bootstrap/dist/css/bootstrap.css';
5
6const App = () => (
7  <Formik
8    initialValues={{ firstName: '' }}
9    onSubmit={(values) => console.log(values)}
10  >
11    <Form>
12      {*/ this will print the label as First Name */}
13      <Field name="firstName" />
14      <Submit withSpinner>Submit</Submit>
15    </Form>
16  <Formik>
17);

The basic functionality also works for check boxes and radio buttons:

1import React from 'react';
2import { Form, Formik } from 'formik';
3import { Field, Submit } from 'formik-strap';
4import 'bootstrap/dist/css/bootstrap.css';
5
6const App = () => (
7  <Formik
8    initialValues={{ terms: false }}
9    onSubmit={(values) => console.log(values)}
10  >
11    <Form>
12      <Field type="checkbox" name="terms" />
13      <Submit withSpinner>Submit</Submit>
14    </Form>
15  <Formik>
16);

You may also completely customize how your input is displayed by setting the withTemplate property to false:

1import React from 'react';
2import { Form, Formik } from 'formik';
3import { Field, Submit } from 'formik-strap';
4import { FormGroup, InputGroup, Label } from 'reactstrap';
5import 'bootstrap/dist/css/bootstrap.css';
6
7const App = () => (
8  <Formik
9    initialValues={{ username: '' }}
10    onSubmit={(values) => console.log(values)}
11  >
12    <Form>
13      <FormGroup>
14        <Label for="username">Username</Label>
15        <InputGroup>
16          <span className="input-group-text">@</span>
17
18          {*/ Note: this will remove the label */}
19          <Field name="firstName" withTemplate={false} />
20
21        </InputGroup>
22      </FormGroup>
23      <Submit withSpinner>Submit</Submit>
24    </Form>
25  <Formik>
26);