React form with Controled Input

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.

Instalation

npm install useforms
yarn add useforms

Usage

useForm provides a input function, this function as a link with input and a object property of form state.

import {useForm} from 'useforms'
/*
* initial Values optional
*/
const initialValues = {
data1:"test",
complextData:[
{
first:"testComplexData",
score:45
}
]
}
const [{values, reset, onSubmit},{input}] = useForm({onChange:true, initialValues})

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

<form onSubmit={onSubmit(e=> console.log(e))} onReset={reset}>
<input {...input("data1", "text")}/>
<input {...input("complexData.0.first", "text")}/>
<input {...input({name:"complexData.0.score", type:"number"})}/>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>

Demo

{
  "data1": "test",
  "complexData": [
    {
      "first": "testComplexData",
      "score": 45
    }
  ]
}