Usage with form libraries#

Bumbag provides you with field adaptors for the React form libraries Formik and Redux Form to allow for 'built-in' state & validation rendering instead of you doing it yourself with their metadata.

Formik#

To use Bumbag fields with Formik, import the .Formik component from the Bumbag form field.

import React from 'react';
import { Formik, Form, Field } from 'formik';
import { InputField } from 'bumbag';
function Form() {
  return (
    <Formik
      initialValues={{ username: '' }}
      onSubmit={data => console.log(data)}
    >
      <Form>
        <Field
          component={InputField.Formik}
          name="username"
          label="Username"
        />
      </Form>
    </Formik>
  );
}
export default Form;

Redux Form#

To use Redux Form fields with Formik, import the .ReduxForm component from the Bumbag form field.

import React from 'react';
import { reduxForm, Field } from 'redux-form';
import { InputField } from 'bumbag';
function Form() {
  return (
    <form>
      <Field
        component={InputField.ReduxForm}
        name="username"
        label="Username"
      />
    </form>
  );
}
export default reduxForm({ form: 'addUsername' })(Form);

On this page