OnChange mode

Description

There are two types of form input in React. We have the uncontrolled input and the controlled input. When using controlled forms, the input value is set to state values and then updated via React events. Defining a form 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.

Controlled inputs are the most popular in the react ecosystem, are easier to write and understanding. But when you think about performance controlled inputs are less powerful than uncontrolled inputs.Every time that component state is updated the component is rendered again and this affects the performance result.

Usage

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: "onChange",
});

const test = "";

Use dot notation to create advanced objects or to map object values. Type an entry name and type or an entry property object.

function Form() {
  const { register } = useForm();
 
  return (
    <form>
      <input {...register("name")} />
      <input {...register("address.street")} />
      <input {...register("address.city")} />
    </form>
  );
}