![Logo](./.github/Logo.svg) ![Version](https://badgen.net/npm/v/formhero) ![Dependencies](https://badgen.net/david/dep/cupcakearmy/formhero) ![Size Badge](https://badgen.net/bundlephobia/minzip/formhero) **Fully customisable react form utility.** ## 🌈 Features - Typescript compatible - Customizable extractor, validator, getter and setters. (More in the docs) - No Deps - Tiny - React Hooks ## 🚀 Quickstart ```typescript import ReactDOM from 'react-dom' import { useForm } from 'formhero' const Form = () => { const { auto, form } = useForm({ username: '', password: '', }) const _submit = (e: React.FormEvent) => { e.preventDefault() console.log(form) } return (
) } ``` ## 🔥 Avanced Example ```typescript import ReactDOM from 'react-dom' import { useForm } from 'formhero' const Form = () => { const { auto, form, errors } = useForm({ username: '', password: '', type: 'formhero', awesome: true, }, { username: /^test/, password: { validator: /^.{3,}$/, message: 'To short', }, awesome: (value) => !!value }) const _submit = (e: React.FormEvent) => { e.preventDefault() console.log(form, errors) } return (
Username
{errors.username && 'Something went wrong'}
Password

Which one to choose?

Is it awesome?
e.target.checked })} />
) } ``` ## 📖 Docs ### `useForm` ```typescript const {auto, errors, update, form} = useForm(initial, validators, options) ``` ### Initial This is the base state of the form. Also the typescript types are inhered by this. ###### Example ```javascript const initial = { username: 'defaultValue', password: '', rememberMe: true, } ``` ### Validators A validator is an object that taked in either a `RegExp` or a `Function` (can be async). Optionally you can pass a message string that will be displayed instead of the default one. ###### Example: Regular Expression ```javascript const validators = { // Only contains letters. // This could also be a (also async) function that returns a boolean. username: /^[A-z]*$/, } ``` ###### Example: Function ```typescript const validators = { username: (value: string) => value.lenght > 3, } ``` ###### Example: With Object ```javascript const validators = { username: { validator: /^[A-z]*$/, message: 'My custom error message', } } ```