@truefit/bach-formik

This library allows components composed with @truefit/bach to idiomatically use Formik

Installation

npm install @truefit/bach-formik formik

or

yarn add @truefit/bach-formik formik

Enhancers

withFormik

Allows you to specify that the composed component should be wrapped in a Formik element. This enhancer uses the Formik component.

Helper Signature

Parameter	Type	Description
formikProps	js object	a js object containing the props to pass to the formik element - see formik documentation for full list

Example

Typescript

1import React from 'react';
2import {compose, withCallback} from '@truefit/bach';
3import {withFormik} from '@truefit/bach-formik';
4import {FormikProps} from 'formik';
5
6type FormValues = {
7  name: string;
8  address: string;
9  age: number;
10};
11
12type Props = {
13  handleFormSubmit: () => void;
14  formik: FormikProps<FormValues>;
15};
16
17const WithFormik = ({formik: {values, handleChange, handleBlur}, handleFormSubmit}: Props) => (
18  <div>
19    <input name="name" onChange={handleChange} onBlur={handleBlur} value={values.name} />
20    <input name="address" onChange={handleChange} onBlur={handleBlur} value={values.address} />
21    <input name="age" onChange={handleChange} onBlur={handleBlur} value={values.age} />
22
23    <button type="submit" onClick={handleFormSubmit}>
24      Submit
25    </button>
26  </div>
27);
28
29export default compose(
30  withFormik({
31    initialValues: {name: 'John Doe', address: '', age: 0},
32    onSubmit: (values: FormValues) => {
33      console.log(values); // eslint-disable-line
34    },
35  }),
36
37  // this is needed to handle the type disparity between formik and onClick
38  withCallback<Props>('handleFormSubmit', ({formik: {handleSubmit}}: Props) => () => {
39    handleSubmit();
40  }),
41)(WithFormik);

Javascript

1import React from 'react';
2import {compose} from '@truefit/bach';
3import {withFormik} from '@truefit/bach-formik';
4
5const WithFormik = (formik: {values, handleChange, handleBlur, handleSubmit}) => (
6  <div>
7    <input
8      name="name"
9      onChange={handleChange}
10      onBlur={handleBlur}
11      value={values.name}
12    />
13    <input
14      name="address"
15      onChange={handleChange}
16      onBlur={handleBlur}
17      value={values.address}
18    />
19    <input
20      name="age"
21      onChange={handleChange}
22      onBlur={handleBlur}
23      value={values.age}
24    />
25
26    <button type="submit" onClick={handleSubmit}>
27      Submit
28    </button>
29  </div>
30);
31
32export default compose(
33  withFormik({
34    initialValues: {name: 'John Doe', address: '', age: ''},
35    onSubmit: values => {
36      console.log(values); // eslint-disable-line
37    },
38  }),
39)(WithFormik);