hook-for-react-use-form

To have the last updates, please install use-formidable instead of this package. In the future only use-formidable will be maintained, sorry for the inconvenience.

Having many big nested forms quickly lead to huge components, duplicates and hard-to-maintain code. useForm is a dead-easy-to-use lightweight react hook to handle big nested forms in an easy declarative way.

Join on GitHub to follow, test, raise issues and join !

What does it do

* It handles deeply-nested complex data structure in a dead-easy declarative way,
* It handles any kind of inputs (it turns checkboxes into booleans and handles files input),
* It comes with a set of live modifiers and validators, and it lets you use custom validators,
* Types are included for typescript, it is lightweight and has no dependencies,
* Use it with use-wizard to handle complex multi-path, multi-steps nested forms

Get started 🚀

Install it

`

Initialize your form data

Declaring an initialForm is not mandatory, you can pass an empty object, it will be updated on the go.

`
const initialForm = {
identity: {
firstName: "",
lastName: "",
dateOfBirth: "",
description: "",
},
contact: {
email: "",
phone: "",
location: {
country: "",
},
},
subscribedToMailingList: false,
numberOfAnything: 0,
};
`

Declare useForm like you would declare any other hook

`




<br />



-- Choose one --
France
Finland





Examples are comming, but principle is exactly the same as aboove
`

You can also call updateForm yourself in a function like this:
`
updateForm()({target: {type: "custom", name: "name", value: "value"}});
`

Check further rules in the doc

Doc 🔖

* Live modifiers: live modifiers change the input before updating form data. To use them, set them to true in the brackets when calling updateForm({}).
toLowerCase: true* will apply toLowerCase()
toUpperCase: true* will apply toUpperCase()
toCapitalized: true* will capitalize the string
toNumber: true* will extract numbers and '.' from a string to turn it into a number
toKeepNumbers: true* will only keep numbers in a string
maximumLength: 130* will prevent user from typing more than n characters
custom: (input: any) => any* allows you to pass a custom modifier (must return the new value)

* Validators: Validators help you to give a real-time feedback to your users on what's missing / wrong about their data. They are part of the formidable object.
isEmail(value)* checks if a value is an email
isLengthAbove(value)* checks if a value is above or equal to minimum length
isLengthUnder(value)* checks if a value is under or equal to a maximum length
isFileMime(file, ["jpeg", "gif"])* checks if a file MIME TYPE is in the array (accepted values to check are: "pdf" | "jpeg" | "png" | "gif" | "svg" | "doc" | "docx" | "odt" | "xls" | "xlsx" | "ods" | "csv")
isFileSmallerThan(file, size)* checks file size in bytes
isCustomRegex(value, regex)* checks if a value matches a custom regex (your function must have two parameters: the value to check and the regex)
isCustomValidator(value, (value) => boolean)* checks if a value matches a custom function (your function must have the "value" parameter and return a boolean)

* Displayers: Displayers are specific modifiers. They help you to modify a value when it is displayed.
displayerSpacesToThousands(value)* adds spaces in a number (or a string), all 3 numbers (1234 will become 1 234). It returns a string.

* Other methods: They are part of formHandler object.
getInitialForm* returns the initial state
reset* resets all values
cancel* cancel the last input that was modified <-- not available yet

* Which inputs are handled ?
* checkbox
* color
* date
* datetime-local
* email
* file
* hidden
* month
* number
* password
* radio
* range
* text
* textarea
* search
* select-one
* tel
* time
* url
* week
* To use a custom input, just call
`
// Be carefull, there are () twice
updateForm()({target: {type: "custom", name: "name", value: "value"}});
``

* What you should be carefully about regarding components
* Your input must always have a name
* If the data you want to update is nested, declare the name as the path separated by '.' like in the examples above

Go further

* Use it with use-wizard to build multi-paths, multi-steps wizards

Great alternatives

You have more robust battle-tested solutions out there
* Formik helps you to declare form components, this is a great solution, but I like keeping control over my components
* react-hook-form is a React hook, which makes it closer to this one