Instruction file imported from saraikium/trackster (
.cursor/rules/tanstack-from-submission-handling.mdc). Copyright stays with the author.
description: Tanstack Form: Submission handling alwaysApply: false
import { useForm } from '@tanstack/react-form'
type FormMeta = { submitAction: 'continue' | 'backToMenu' | null }
// Metadata is not required to call form.handleSubmit(). // Specify what values to use as default if no meta is passed const defaultMeta: FormMeta = { submitAction: null, }
function App() {
const form = useForm({
defaultValues: {
data: '',
},
// Define what meta values to expect on submission
onSubmitMeta: defaultMeta,
onSubmit: async ({ value, meta }) => {
// Do something with the values passed via handleSubmit
console.log(Selected action - ${meta.submitAction}, value)
},
})
return ( <form onSubmit={(e) => { e.preventDefault() e.stopPropagation() }} > {/* ... */} <button type="submit" // Overwrites the default specified in onSubmitMeta onClick={() => form.handleSubmit({ submitAction: 'continue' })} > Submit and continue <button type="submit" onClick={() => form.handleSubmit({ submitAction: 'backToMenu' })} > Submit and back to menu ) }