mirror of
https://github.com/LukeHagar/form.git
synced 2025-12-07 04:19:45 +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
1.3 KiB
1.3 KiB
id, title
| id | title |
|---|---|
| quick-start | 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.
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!