Заметки про React
Ссылка
нажмите — покажем
нажмите — покажем
Сохранение данных форм с помощью Nuqs
Во время заполнения формы может потребоваться промежуточное сохранение данных, чтобы при обновлении страницы пользователь не потерял введенные данные, либо поделиться данными формой с другими пользователями.
Вариант с localStorage не самый подходящий, с его помощью нельзя поделиться ссылкой на форму с другими пользователями. Автор статьи предлагает использовать библиотеку Nuqs, с помощью которой можно сохранять данные формы в URL в query params. Его можно легко интегрировать с Zod и useForm от react-hook-form и у него встроенная поддержка типизации. Пример формы:
import { useQueryState, parseAsJson } from "nuqs"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { z } from "zod"
// Define our schema
const statusEnum = ["working", "chilling", "cooking"] as const
const formSchema = z.object({
firstName: z.string(),
lastName: z.string(),
status: z.enum(statusEnum),
})
type FormSchemaType = z.infer<typeof formSchema>
function MyForm() {
// Initialize Nuqs state
const [jsonData, setJsonData] = useQueryState(
"json",
parseAsJson(formSchema.parse),
)
// Set up form with React Hook Form
const form = useForm<FormSchemaType>({
resolver: zodResolver(formSchema),
values: jsonData, // Pre-fill form with URL data
})
const handleSubmit = form.handleSubmit((data) => {
console.log(data)
setJsonData(data) // Update URL state
})
return (
<form onSubmit={handleSubmit}>
<TextInput label="First name" {...form.register("firstName")} />
<TextInput label="Last name" {...form.register("lastName")} />
<SelectInput
label="Status"
options={statusEnum}
{...form.register("status")}
/>
<Button type="submit">Submit</Button>
</form>
)
}
https://armand-salle.fr/post/persisting-form-data-in-react-a-modern-approach-with-nuqs/
47 · 3.7K ·