React form with Uncontrolled Input

Description

There are two types of form input in React. We have the uncontrolled input and the controlled input. Uncontrolled inputs are like traditional HTML form inputs:

<div>
<input type="text" />
</div>

With uncontrolled input values, there is no updating or changing of any states. When we use uncontrolled input is necessary to set a reference in input for manipulating and receives events, but with userForm it isn't necessary because userForm makes this for us. Uncontrolled inputs are useful when performance is essential. But if the forms turn very complex debounce inputs are the best option.

Ps * You do not can use uncontrolled form with custom inputs because custom inputs use state in your internal logic. If you want to use uncontrolled form with custom inputs and native inputs the uncontrolled approach is applied only native inputs.

React Docs

By default, useForm use uncontrolled inputs, isn't necessary to pass any value to useForm hook if you want to use this kind. But when you use this kind of form, it is necessary to realize that values and events validation are available only when onSubmit event is dispatched.

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({})

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

{}