Simple declarative bindings for Mantine and Formik.

Getting started

npm install formik-mantine

Example

1import React from 'react'
2import { Form, Input, InputNumber, Checkbox } from 'formik-mantine'
3import { Formik } from 'formik'
4
5function App() {
6  return (
7    <Formik
8      {/* default/initial values are set on the Formik container: */ }
9      initialValues={{ firstName: '', age: 20, newsletter: false }}
10      render={() => (
11        <Form>
12          {/* every formik-antd component must have the 'name' prop set: */}
13          <Input name='firstName' placeholder='First Name' />
14          {/* the rest of the api stays as is */}
15          <InputNumber name='age' min={0} />
16          <Checkbox name='newsletter'>Newsletter</Checkbox>
17        </Form>
18      )}
19    />
20  )
21}

Core Concept

This library enriches several Mantine components with a required name: string prop that connects them to a Formik form field. It is quite simple. Instead of importing your form components from Mantine, you need to import them from 'formik-mantine' and set their name prop. Now the component is connected/synced with the corresponding Formik field!

The Ant Design components are feature rich and provide a lot of props to customize their visual presentation. These features and also their apis stay exactly the same. Visit their documentation to learn more.