Antd-final-form NPM

antd-final-form

Simple declarative bindings for Ant Design and React Final Form.

Core Concept

This library enriches several Ant Design components with props that connects them to a Final-Form field. It is quite simple. Instead of importing your form components from antd, you need to import them from 'antd-final-form' and set their name prop.

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.

Example:

import * as React from 'react';
import { AntdInput } from 'antd-final-form';
import { Form, Field } from 'react-final-form';
import 'antd/dist/antd.css';

export const required = (value: string | number) => (value ? undefined : '* Required');

export default function App() {
  return (
    <Form
      onSubmit={(values) => console.log(values)}
      initialValues={{ firstName: 'Larry', lastName: 'hello' }}
      render={({ handleSubmit, form, submitting, pristine, values }) => (
        <form onSubmit={handleSubmit}>
          <Field
            label='test'
            name='firstName'
            validate={required}
            component={AntdInput}
            placeholder='First Name'
          />
          <Field name='lastName' label='Last Name' component={AntdInput} />
          <pre>{JSON.stringify(values)}</pre>
        </form>
      )}
    />
  );
}