net - UK (2020-01)

(Antfer) #1

PROJECTS
Formik


INTEGRATION OPTIONS


RESOURCES

Formik’s API enables us to build a form as simple or as
intricate as we like. It also allows for abstraction, meaning
helper libraries can do some of that heavy lifting on our behalf.
Here are a few packages that can help integrate Formik into an
existing project with minimal friction.

React Native Formik
https://github.com/bamlab/react-native-formik
There is no native form behaviour in React Native, which means
Formik needs to behave slightly differently. The react-native-
formik package provides several helper functions to bridge the
gap and have the two play nicely together. Hook into any input,
including those not designed with Formik in mind.

Formik Material-UI
https://github.com/stackworx/formik-material-ui
Material-UI is a set of React components that are styled on
Google’s Material Design principles. The role of formik-material-
ui is to take Formik’s data shape and map it to what’s expected
for Material-UI on our behalf. There is a selection of components
available, such as text boxes, toggle switches and file uploaders.

Formik Antd
https://github.com/jannikbuschke/formik-antd
Ant Design is a design language and style system being used
in enterprise applications around the world, including those by
Alibaba and Baidu. The port of their component library includes
star ratings, date pickers and even a nested drop-down selector
that plays well with any Formik setup.

The <Field> component does the same job as
<Form> does for the whole form. It binds the
necessary events and props such as a name and value
in order to display field state.
Add a field into the form and connect it to a label.
These work as they would in regular HTML forms.

import { Field } from “formik”;
<label htmlFor=”name”>Name</label>
<Field autoComplete=”name” id=”name” name=”name”
type=”text” />

We don’t need to work with any browser events
to submit, as the onSubmit event is handled for
us. But we do need to supply the logic to handle
submission. The callback is still called onSubmit
but it instead receives the form values directly. It
also receives the ‘bag’ – an object containing a few
methods to interact with the form while it submits.
As this data would typically head to a server,
this function can also be asynchronous. Formik
has a special isSubmitting prop that it sets to true
automatically once the submission starts. With
an async function, we can wait until the form has
submitted and set that back to false.
Back inside VoteContainer.js, we can add our
submission logic. Create the function and pass it to
the <Formik> component. For this example, we won’t
be sending to a server but we can use a delayed
Promise to simulate the network latency.

const onSubmit = async (values, bag) => {
await new Promise(resolve => setTimeout(resolve,
1000));
bag.setSubmitting(false);
console.log(“Form submitted”, values);
};
return <Formik [...] onSubmit={onSubmit} />;

We also need to display that submitting state within
the form. To prevent a double submission, we can
disable the button while the form is submitting.
Formik passes this into the form inside Vote.js as a
prop. We can pull this out and apply it to the button.

function Vote({ isSubmitting }) {[...]}
<input disabled={isSubmitting} type=”submit” value=”Vote
now” />

At the moment the form can be submitted without
a name being entered. As this is a required field, we
should flag this to the user.
The root <Formik> component also takes a
validate prop, which is a function that performs
validation and returns an object. Each key-value
Free download pdf