UI-Bibliotheken

Verwendung von TanStack Form mit UI-Bibliotheken

TanStack Form ist eine Headless-Bibliothek, die Ihnen die vollständige Flexibilität bietet, sie nach Belieben zu gestalten. Sie ist mit einer Vielzahl von UI-Bibliotheken kompatibel, darunter Tailwind, Material UI, Mantine oder sogar einfachem CSS.

Dieser Leitfaden konzentriert sich auf Material UI und Mantine, aber die Konzepte sind auf jede UI-Bibliothek Ihrer Wahl anwendbar.

Voraussetzungen

Stellen Sie sicher, dass die notwendigen Abhängigkeiten in Ihrem Projekt installiert sind, bevor Sie TanStack Form mit einer UI-Bibliothek integrieren

Für Material UI folgen Sie den Installationsanweisungen auf deren offiziellen Website.
Für Mantine konsultieren Sie deren Dokumentation.

Hinweis: Obwohl Sie Bibliotheken mischen und anpassen können, ist es im Allgemeinen ratsam, bei einer zu bleiben, um Konsistenz zu wahren und überflüssige Elemente zu minimieren.

Beispiel mit Mantine

Hier ist ein Beispiel, das die Integration von TanStack Form mit Mantine-Komponenten zeigt

tsx

import { TextInput, Checkbox } from '@mantine/core'
import { useForm } from '@tanstack/react-form'

export default function App() {
  const { Field, handleSubmit, state } = useForm({
    defaultValues: {
      firstName: '',
      lastName: '',
      isChecked: false,
    },
    onSubmit: async ({ value }) => {
      // Handle form submission
      console.log(value)
    },
  })

  return (
    <>
      <form
        onSubmit={(e) => {
          e.preventDefault()
          handleSubmit()
        }}
      >
        <Field
          name="firstName"
          children={({ state, handleChange, handleBlur }) => (
            <TextInput
              defaultValue={state.value}
              onChange={(e) => handleChange(e.target.value)}
              onBlur={handleBlur}
              placeholder="Enter your name"
            />
          )}
        />
        <Field
          name="isChecked"
          children={({ state, handleChange, handleBlur }) => (
            <Checkbox
              onChange={(e) => handleChange(e.target.checked)}
              onBlur={handleBlur}
              checked={state.value}
            />
          )}
        />
      </form>
      <div>
        <pre>{JSON.stringify(state.values, null, 2)}</pre>
      </div>
    </>
  )
}

import { TextInput, Checkbox } from '@mantine/core'
import { useForm } from '@tanstack/react-form'

export default function App() {
  const { Field, handleSubmit, state } = useForm({
    defaultValues: {
      firstName: '',
      lastName: '',
      isChecked: false,
    },
    onSubmit: async ({ value }) => {
      // Handle form submission
      console.log(value)
    },
  })

  return (
    <>
      <form
        onSubmit={(e) => {
          e.preventDefault()
          handleSubmit()
        }}
      >
        <Field
          name="firstName"
          children={({ state, handleChange, handleBlur }) => (
            <TextInput
              defaultValue={state.value}
              onChange={(e) => handleChange(e.target.value)}
              onBlur={handleBlur}
              placeholder="Enter your name"
            />
          )}
        />
        <Field
          name="isChecked"
          children={({ state, handleChange, handleBlur }) => (
            <Checkbox
              onChange={(e) => handleChange(e.target.checked)}
              onBlur={handleBlur}
              checked={state.value}
            />
          )}
        />
      </form>
      <div>
        <pre>{JSON.stringify(state.values, null, 2)}</pre>
      </div>
    </>
  )
}

Zunächst verwenden wir den Hook useForm von TanStack und destrukturieren die notwendigen Eigenschaften. Dieser Schritt ist optional; alternativ könnten Sie const form = useForm() verwenden, wenn Sie dies bevorzugen. Die Typinferenz von TypeScript gewährleistet eine reibungslose Erfahrung, unabhängig vom Ansatz.
Die Komponente Field, abgeleitet von useForm, akzeptiert mehrere Eigenschaften wie validators. Für diese Demonstration konzentrieren wir uns auf zwei primäre Eigenschaften: name und children.
- Die Eigenschaft name identifiziert jedes Field, zum Beispiel firstName in unserem Beispiel.
- Die Eigenschaft children nutzt das Konzept der Render Props, wodurch wir Komponenten ohne unnötige Abstraktionen integrieren können.
Das Design von TanStack basiert stark auf Render Props und bietet Zugriff auf children innerhalb der Field-Komponente. Dieser Ansatz ist vollständig typsicher. Bei der Integration mit Mantine-Komponenten wie TextInput destrukturieren wir selektiv Eigenschaften wie state.value, handleChange und handleBlur. Diese selektive Vorgehensweise ist auf die leichten Typunterschiede zwischen TextInput und dem field zurückzuführen, das wir in den Children erhalten.
Durch Befolgen dieser Schritte können Sie Mantine-Komponenten nahtlos in TanStack Form integrieren.
Diese Methodik ist ebenso auf andere Komponenten wie Checkbox anwendbar und gewährleistet eine konsistente Integration über verschiedene UI-Elemente hinweg.

Verwendung mit Material UI

Der Prozess zur Integration von Material UI-Komponenten ist ähnlich. Hier ist ein Beispiel mit TextField und Checkbox von Material UI

tsx

        <Field
            name="lastName"
            children={({ state, handleChange, handleBlur }) => {
              return (
                <TextField
                  id="filled-basic"
                  label="Filled"
                  variant="filled"
                  defaultValue={state.value}
                  onChange={(e) => handleChange(e.target.value)}
                  onBlur={handleBlur}
                  placeholder="Enter your last name"
                />
              );
            }}
          />

           <Field
            name="isMuiCheckBox"
            children={({ state, handleChange, handleBlur }) => {
              return (
                <MuiCheckbox
                  onChange={(e) => handleChange(e.target.checked)}
                  onBlur={handleBlur}
                  checked={state.value}
                />
              );
            }}
          />

        <Field
            name="lastName"
            children={({ state, handleChange, handleBlur }) => {
              return (
                <TextField
                  id="filled-basic"
                  label="Filled"
                  variant="filled"
                  defaultValue={state.value}
                  onChange={(e) => handleChange(e.target.value)}
                  onBlur={handleBlur}
                  placeholder="Enter your last name"
                />
              );
            }}
          />

           <Field
            name="isMuiCheckBox"
            children={({ state, handleChange, handleBlur }) => {
              return (
                <MuiCheckbox
                  onChange={(e) => handleChange(e.target.checked)}
                  onBlur={handleBlur}
                  checked={state.value}
                />
              );
            }}
          />

Der Integrationsansatz ist derselbe wie bei Mantine.
Der Hauptunterschied liegt in den spezifischen Material UI-Komponenteneigenschaften und Styling-Optionen.

Verwendung von TanStack Form mit UI-Bibliotheken

Voraussetzungen

Beispiel mit Mantine

Verwendung mit Material UI

Bytes abonnieren

Bytes abonnieren