form

TanStack Form is a powerful, type-safe, and flexible form management library for React applications. It provides a headless UI approach, allowing developers to build complex forms with custom UI components while handling state management, validation, and submission logic efficiently.

Pros

• Type-safe: Leverages TypeScript for strong typing and improved developer experience
• Flexible: Headless UI approach allows for complete control over form rendering
• Performance-oriented: Optimized for minimal re-renders and efficient state updates
• Comprehensive: Handles complex form scenarios, including nested fields and arrays

Cons

• Learning curve: May require time to understand the API and concepts
• Verbose setup: Initial configuration can be more complex compared to simpler form libraries
• Limited ecosystem: Being relatively new, it has fewer third-party integrations and resources compared to more established libraries

Code Examples

1. Basic form setup:

import { useForm } from '@tanstack/react-form'

function MyForm() {
  const form = useForm({
    defaultValues: {
      firstName: '',
      lastName: '',
    },
    onSubmit: async ({ value }) => {
      // Submit form data
      console.log('Form submitted:', value)
    },
  })

  return (
    <form.Provider>
      <form onSubmit={form.handleSubmit}>
        <form.Field
          name="firstName"
          children={(field) => (
            <input
              placeholder="First Name"
              value={field.state.value}
              onBlur={field.handleBlur}
              onChange={(e) => field.handleChange(e.target.value)}
            />
          )}
        />
        <form.Field
          name="lastName"
          children={(field) => (
            <input
              placeholder="Last Name"
              value={field.state.value}
              onBlur={field.handleBlur}
              onChange={(e) => field.handleChange(e.target.value)}
            />
          )}
        />
        <button type="submit">Submit</button>
      </form>
    </form.Provider>
  )
}

2. Form with validation:

import { useForm } from '@tanstack/react-form'

function MyFormWithValidation() {
  const form = useForm({
    defaultValues: {
      email: '',
    },
    onSubmit: async ({ value }) => {
      console.log('Form submitted:', value)
    },
  })

  return (
    <form.Provider>
      <form onSubmit={form.handleSubmit}>
        <form.Field
          name="email"
          validators={{
            onChange: ({ value }) => {
              if (!value.includes('@')) {
                return 'Invalid email address'
              }
            },
          }}
          children={(field) => (
            <>
              <input
                placeholder="Email"
                value={field.state.value}
                onBlur={field.handleBlur}
                onChange={(e) => field.handleChange(e.target.value)}
              />
              {field.state.meta.touchedErrors ? (
                <span>{field.state.meta.touchedErrors}</span>
              ) : null}
            </>
          )}
        />
        <button type="submit">Submit</button>
      </form>
    </form.Provider>
  )
}

Getting Started

To start using TanStack Form, first install the package:

npm install @tanstack/react-form

Then, import and use the useForm hook in your React component:

import { useForm } from '@tanstack/react-form'

function MyForm() {
  const form = useForm({
    defaultValues: {
      // Your form's initial values
    },
    onSubmit: async ({ value }) => {
      // Handle form submission
    },
  })

  return (
    <form.Provider>
      {/* Your form fields and UI components */}
    </form.Provider>
  )
}

Refer to the official documentation for more detailed usage instructions and advanced features.