Setting up TanStack Form in a React Project

This example demonstrates the initial steps to install and configure TanStack Form in a React application, including importing the necessary package and setting up a basic form structure.

npm install @tanstack/react-form

This command installs TanStack Form into your React project.

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

function MyForm() {
  const {
    Form,
    values,
    meta: { isSubmitting, canSubmit },
  } = useForm({
    defaultValues: {
      email: '',
      password: '',
    },
    onSubmit: async (values) => {
      console.log(values);
      // Here you would typically handle form submission, e.g., via an API call
    },
  });

  return (
    <Form>
      <div>
        <label>Email:</label>
        <input type="email" {...Form.getFieldProps('email')} />
      </div>
      <div>
        <label>Password:</label>
        <input type="password" {...Form.getFieldProps('password')} />
      </div>
      <button type="submit" disabled={!canSubmit || isSubmitting}>
        Submit
      </button>
    </Form>
  );
}

This snippet demonstrates setting up a basic form using TanStack Form. It includes an email and a password field. It utilizes the useForm hook to manage form state and handle submission.