tanstack-form-composition

Solid

Migrate a React @tanstack/react-form codebase from the prop-drilled `useForm` + erased-form-type pattern to the official `createFormHook` composition API (`useAppForm` / `withForm` / `field.X`). Use when a project threads a `form` object (often cast to an `any`-erased type like `ReactFormExtendedApi<any,...>`) through field-wrapper components that take `form`+`name` props, and you want typed field names/values, no casts, and reusable bound field components. Triggers: "migrate forms to createFormHook", "adopt useAppForm/withForm", "remove AnyReactForm cast", "type-safe tanstack form fields".

API & Backend 38 stars 11 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 83/100

Stars 20%
53
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# TanStack Form → composition API migration Convert a React project using `@tanstack/react-form` from **raw `useForm` + prop-drilled field wrappers + an `any`-erased form type** to the **`createFormHook` composition API**. The payoff: typed field names/values, deletion of the erased form type and every `as unknown as <ErasedForm>` cast, and bound field components consumed as `field.TextField` instead of `<FieldWrapper form={form} name=… />`. This is for the **React** adapter. Solid/Vue/Angular have the same API shape with different hook names - the concepts below port directly. ## When this applies The codebase has most of these symptoms: - An erased form type alias, e.g. `type AnyForm = ReactFormExtendedApi<any,any,…>` (12 `any` generics), used as a prop type and reached via `form as unknown as AnyForm`. - Field components that accept `form` + `name` props and internally render `<form.Field name={name}>…</form.Field>`. - Shared "section" components that receive the whole `form` as a prop and are reused across multiple parent forms (e.g. a settings form and an onboarding wizard). - Helper functions that take the `form` and call `getFieldValue`/`setFieldValue`. If the project does **not** yet use `@tanstack/react-form`, stop - this skill migrates an existing TanStack Form codebase; it does not introduce the library. ## Method Work in four phases. Do recon fully before editing; build the shared infra once; then migrate call sites; then delete the erased type and v...

Details

Author
suxrobGM
Repository
suxrobGM/jobpilot
Created
4 months ago
Last Updated
yesterday
Language
TypeScript
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

forms

Build or edit any form in a Next.js 16 App Router app — create dialogs, edit panels, settings UIs, anything with input fields that persist to a backend — via one shared toolkit in `lib/forms/` with explicit dirty + valid Save gating, baseline reset on success, and discriminated-union error mapping. Supports two equally-supported underlying form libraries: **TanStack Form + Zod** (default when no preference is set) or **react-hook-form + Zod** (auto-detected and used as-is when already present in the project). Use when the user says "form", "edit panel", "create dialog", "settings page", "save button", "dirty state", or when they reach for `useState` to hold field values, raw `useForm`, hand-rolled dirty tracking, or inline `toast.success/error` on submit. Refuses to apply if `meta.json#stack.framework != "next"` (or monorepo web side) or `stack.nextjs_version != "16"` — Pages Router and pre-16 are out of scope. Not for: React Native forms (RN uses a different ecosystem — refer to RN-side tooling), search boxe

4 Updated 2 days ago
lukedj78
Web & Frontend Listed

react-dev

This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 including generic components, proper event typing, and routing integration (TanStack Router, React Router).

0 Updated yesterday
dills122
Web & Frontend Listed

react-19-notes

React 19 (December 2024) signature features and the breaking-change traps from 18 -> 19. Use when writing or reviewing code in a React 19 project, or planning an upgrade from React 18. Covers Actions and async transitions, the new hooks (useActionState/useOptimistic/useFormStatus and the use() API), ref as a regular prop (forwardRef deprecated), <Context> as a provider, document metadata hoisting, resource preloading (preload/preinit), stable Server Components/Actions, and the removal of long-deprecated APIs (ReactDOM.render/hydrate, propTypes/defaultProps on function components, legacy Context, string refs). Not for application business logic — load when working on React-language code or planning an 18 -> 19 upgrade. Note: React 19 is recommended but NOT required for Next.js 16 (React 18.2+ also works). Output: version-specific guidance, migration traps, and verification gates.

2 Updated today
hmj1026