Read Me useform

Introduction

GitHub license GitHub coverage npm bundle size npm bundle size npm version Tweet

useFom provide a way to create complex forms easily.

🏠 Homepage

✨ Demo

Install

yarn add useforms
npm install useforms

Run tests

yarn test

React data forms provide a way to create complex forms easily, react data forms provide a hook called userForm, this hook returns an object of values ​​in the same shape that it receives, this is possible using dot notation. Therefore, it does not matter if the object is complex or has many properties or array, the result is the same. The same process is realized with errors object and touched object.

Usage

import {useform} from "useforms"
const initialValues = {
first:"one",
second:{
other:[
{
x:12
}
]
}
}
const finalValues = {
first:"one",
second:{
other:[
{
x:12
}
]
}
}
<input {...input("second.other.0.x", "number")}/>
/*or*/
<input {...input({name:"second.other.0.x", type:"number"})}/>

Don't need the tag form, unless if you want to use uncontrolled inputs.

By default react data forms work with Yup Validation.

  • Yup is a JavaScript schema builder for value parsing and validation. Define a schema, transform a value to match, validate the shape of an existing value, or both. Yup schema are extremely expressive and allow modeling complex, interdependent validations, or value transformations.

Get Started

The first example of creating forms is a controlled form, useForm receive an initialObject with optional some properties:

  • onChange: Defines when form state will update.
  • debounce: Defines a form with debounce values.
  • initialValues: Defines initial state of form.
  • validations: Receives a validation schema yup.
import {useForm} from 'useforms'
const initialValues = {
name:"Jesse",
email:"jesse@jesse.com",
pets:["felix"]
}
function ControlledForm(){
const [{values, reset},{input}] = useForm({onChange:true, initialValues})
return (
<>
<input {...input("email", "email")}/>
/* or */
<input {...input({name:"email", type:"email", required:true})}/>
<input {...input("name" ,"name")}/>
<input {...input("pets.0" ,"text")}/>
<input {...input("pets.1" ,"text")}/>
<input {...input("accept", "checkCol")}/>
<input value="1" {...input("others.radio", "radio")}/>First
<input value="2" {...input("others.radio", "radio")}/>Second
<input value="3" {...input("others.radio", "radio")}/>Third
</>
)
}

In this case I created a form without a validation and with onChange option, it is worth mentioning that useForm by default works with uncontrolled inputs.

Uncontrolled inputs provide better performance because they drastically reduce the amount of time render component.


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


propertiesdescription
onSubmitis a void function that accepts a function as a parameter, this function is used when you choose uncontrolled inputs
setInputis a void function that change the current value of a specific input, this function receives two parameters, the first parameter is the name of input and the second is de new value.
setInputsis a void function that change the current state of form, this function receives the new value of form as a parameter.
resetis a void function that reset form for the initial state.
resetInputis a void function that resets an input for the initial state. That function receives the input name as a parameter.
valuesobject of values your form.
inputis a function that returns properties for the input component, this function receives the name and type as a parameter or an object with input properties.
customis a function that returns properties for custom input component like React Select or React Datepicker, this function receives the name and type as a parameter or an object with input properties
errorsobject of errors your form.
touchedobject with all inputs present in your form with the boolean value.

useValidation

useValidation is a hook validation, that hook receives values of form and a schema validation created by Yup and returns the object errors at every change in values form.

Yup is a JavaScript schema builder for value parsing and validation. Define a schema, transform a value to match, validate the shape of an existing value, or both. Yup schema are extremely expressive and allow modeling complex, interdependent validations, or value transformations.

const validation = {....Yup}
const values = {...object values provides by useForm}
const errors = useValidation(values, validation)

Author

πŸ‘€ Jucian0

🀝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

πŸ“ License

Copyright Β© 2020 Jucian0.
This project is MIT licensed.