mirror of
https://github.com/LukeHagar/form.git
synced 2025-12-07 20:37:48 +00:00
6f76feee6b
* fix: memoize all non-function form props by default * chore: migrate useStableFormOpts to useMemo * fix: options passed to useField will not always cause a re-render * chore: minor code cleanups * test: add previously failing test to demonstrate fix * chore: fix linting * fix: running form.update repeatedly should not wipe form state * test: add test to validate formapi update behavior * test: add initial tests for useStableOptions * chore: remove useStableOpts and useFormCallback
52 lines
1.3 KiB
Markdown
52 lines
1.3 KiB
Markdown
---
|
|
id: quick-start
|
|
title: Quick Start
|
|
---
|
|
|
|
The bare minimum to get started with TanStack Form is to create a form and add a field. Keep in mind that this example does not include any validation or error handling... yet.
|
|
|
|
```tsx
|
|
import React from 'react'
|
|
import ReactDOM from 'react-dom/client'
|
|
import { useForm } from '@tanstack/react-form'
|
|
|
|
export default function App() {
|
|
const form = useForm({
|
|
// Memoize your default values to prevent re-renders
|
|
defaultValues: {
|
|
fullName: '',
|
|
},
|
|
onSubmit: async (values) => {
|
|
// Do something with form data
|
|
console.log(values)
|
|
},
|
|
})
|
|
|
|
return (
|
|
<div>
|
|
<form.Provider>
|
|
<div>
|
|
<form.Field
|
|
name="fullName"
|
|
children={(field) => (
|
|
<input
|
|
name={field.name}
|
|
value={field.state.value}
|
|
onBlur={field.handleBlur}
|
|
onChange={(e) => field.handleChange(e.target.value)}
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
<button type="submit">Submit</button>
|
|
</form.Provider>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const rootElement = document.getElementById('root')!
|
|
ReactDOM.createRoot(rootElement).render(<App />)
|
|
```
|
|
|
|
From here, you'll be ready to explore all of the other features of TanStack Form!
|