title | description | tags |
---|---|---|
Debounced mode |
When you use debounced form, the debounce parameter delays the updating of the state until the user has stopped changing inputs for a predetermined amount of time. |
react, form, useform,createform, use-form, debounce, debounced, hook, reactjs |
import Callout from "../../../components/Callout"; import Demo from "../../../components/Demo"; import { FormDemo } from "../../../components/DebouncedDemo"; import { Tab, Tabs } from "../../../components/Tabs";
<Tabs items={["Preview", "Code"]}>
import { createForm } from "@createform/react";
import { z } from "zod";
const useForm = createForm({
initialValues: {
email: "",
password: "",
terms: false,
},
mode: "debounced",
validationSchema: z.object({
email: z.string().email(),
password: z.string().min(8),
terms: z.boolean(),
}),
});
function FormDemo() {
const { register, state } = useForm();
const {errors, touched} = state
function handleSubmit(data){console.log(data)}
return (
<form
onSubmit={handleSubmit}
noValidate
className="border dark:border-gray-800 p-5 rounded"
>
<div className="mb-6">
<label>Your email</label>
<input
id="email"
{...register({
name: "email",
type: "email",
placeholder: "createform@demo.com",
required: true,
})}
/>
</div>
<div className="mb-6">
<label>Your password</label>
<input
{...register({
name: "password",
type: "password",
placeholder: "*********",
required: true,
})}
/>
<span className="text-red-600">{touched.email && errors.email}</span>
</div>
<div className="flex items-start mb-6">
<div className="flex items-center h-5">
<input
{...register({
name: "terms",
type: "checkbox",
placeholder: "*********",
required: true,
})}
/>
<span className="text-red-600">
{touched.password && errors.password}
</span>
</div>
<label>
I agree with the{" "}
<a href="#" className="text-brand hover:underline dark:text-brand">
terms and conditions
</a>
</label>
</div>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
)
}
Debounce function forces a function to wait a certain amount of time before running again. The function is built to limit the number of times a function is called.
The debounce parameter delays the updating of the state until the user has stopped changing inputs for a predetermined amount of time.
The input value is set to state values and then updated via React events. Defining a form’s input value via state is considered a controlled component. For controlled inputs, you will need a corresponding state and then a function to update that state with changes.
It means that whenever state is changed the component, it is rendered again.
If you want to use this kind of form, you need only pass property mode:'debounced'
.
Also, it means that the validations are run in every state change, providing better user feedback. See more in Controlled Inputs with validation.
Createform provides a register
function, this function returns all properties to manager a field.
import { createForm } from "@createform/react";
const useForm = createForm({
initialValues: {
name: "Anna",
address: [
{
street: "123 Main St",
city: "Anytown",
},
],
},
mode: "debounced",
});
Use dot notation to create advanced objects or to map object values. Type an entry name and type or an entry property object.
- Dot notation is used to access nested objects. For example, if you have an object with a nested object, you can access the nested object using dot notation;
info.name
. - Use dot notation to access nested arrays. For example, if you have an object with a nested array, you can access the nested array using dot notation;
info.array[2]
.
function Form() {
const { register } = useForm();
return (
<form>
<input {...register("name")} />
<input {...register("address.street")} />
<input {...register("address.city")} />
</form>
);
}