Files
form/docs/framework/react/quick-start.md
Tanner Linsley 6df2235497 docs: update
2023-04-28 08:08:12 -06:00

50 lines
1.2 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: React.useMemo(
() => ({
fullName: '',
}),
[],
),
onSubmit: async (values) => {
// Do something with form data
console.log(values)
},
})
return (
<div>
<form.Form>
<div>
<form.Field
name="fullName"
children={(field) => (
<input name={field.name} {...field.getInputProps()} />
)}
/>
</div>
<button type="submit">Submit</button>
</form.Form>
</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!