tanstack-skills/tanstack-form

Que fait tanstack-form ?

Gestion d'état de formulaire sans tête, performante et type-safe pour TS/JS, React, Vue, Angular, Solid, Lit et Svelte.

Aperçu

tanstack-form est une bibliothèque de gestion d'état de formulaire qui offre :

• Sans tête : Aucune interface utilisateur imposée — gérez le rendu comme vous le souhaitez.
• Performant : Optimisé pour des formulaires complexes avec réactivité granulaire et rendu minimisé.
• Type-safe : Typage complet TypeScript pour les valeurs, les validations et les erreurs de formulaire.
• Multi-framework : Prise en charge de React, Vue, Angular, Solid, Lit, Svelte et JavaScript natif.

Frameworks supportés

Framework	Statut
React	✅
Vue	✅
Angular	✅
Solid	✅
Lit	✅
Svelte	✅
JS/TS natif	✅

Liens et ressources

• Documentation officielle TanStack Form
• Dépôt GitHub
• Exemples et guides

Pour commencer

Installez via votre gestionnaire de paquets préféré :

# Avec npm
npm install @tanstack/react-form
# Avec pnpm
pnpm add @tanstack/react-form
# Avec yarn
yarn add @tanstack/react-form

Pour d'autres frameworks, consultez la documentation appropriée.

Exemples d'utilisation

React

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

function MyForm() {
  const form = useForm({
    defaultValues: {
      name: '',
      email: ''
    },
    validators: {
      onChange: z.object({
        name: z.string().min(2, 'Le nom doit faire au moins 2 caractères'),
        email: z.string().email('Email invalide')
      })
    },
    onSubmit: async (values) => {
      // Soumettre le formulaire
      console.log(values)
    }
  })

  return (
    <form onSubmit={form.handleSubmit}>
      <form.Field name="name">
        {(field) => (
          <div>
            <label htmlFor={field.name}>Nom :</label>
            <input
              id={field.name}
              value={field.state.value}
              onChange={(e) => field.handleChange(e.target.value)}
            />
            {field.state.meta.errors && (
              <span style={{ color: 'red' }}>
                {field.state.meta.errors.join(', ')}
              </span>
            )}
          </div>
        )}
      </form.Field>
      <button type="submit">Envoyer</button>
    </form>
  )
}

Concepts avancés

• Validation asynchrone : Support natif des validateurs asynchrones (ex. : vérifier la disponibilité d'un nom d'utilisateur).
• Logique de soumission : Gestion de l'état isSubmitting avec support des requêtes asynchrones.
• Adaptateurs de framework : Hooks et composants optimisés pour chaque framework.
• Gestion des tableaux : Champs réseau via useFieldArray pour des listes dynamiques.

Contributions

Les contributions sont les bienvenues ! Consultez le dépôt GitHub pour les directives de contribution.