A React hook 🎣 for easy form handling

Table of Contents

Installation

yarn add another-use-form-hook

npm install --save another-use-form-hook

Usage

importReactfrom"react";importReactDOMfrom"react-dom";importuseFormfrom"another-use-form-hook";import"./styles.css";/** * NOTE: We are using date-fns for this example, * but it is absolutly not a requirement. */import{addDays,isAfter,differenceInDays,parseISO}from"date-fns";constisValidEmail=email=>/\w*@\w*\.\w*/.test(email);// Do better 💩constTODAY=newDate();constApp=()=>{constform=useForm({initialState:{email:"",arrival:TODAY,departure:TODAY},validators:(fields,isSubmitting)=>({// if not submitting, don't throw errors for invalid e-mail, like an empty fieldemail:isSubmitting        ?isValidEmail(fields.email)        :typeoffields.email==="string",// earliest arrival must be tomorrowarrival:isAfter(parseISO(fields.arrival),TODAY),// earliest departure must be after tomorrowdeparture:isAfter(addDays(parseISO(fields.departure),1),TODAY),// departure must be at least a day after arrivalminOneNight:isSubmitting        ?differenceInDays(parseISO(fields.departure),parseISO(fields.arrival))>=1        :true}),onNotify:(type,reason)=>{// you can use type and reason to send specific notifications to the userswitch(type){case"submitError":console.error("Form could not be submitted: ",reason);break;case"submitSuccess":console.info("Form has been submitted.",reason);break;case"validationErrors":console.warn("The following problems occurred while validating: ",reason);break;default:break;}},onSubmit:async({ fields, setLoading, notify})=>{try{setLoading(true);// submitting the form, eg.: fetch("path/to/my/submit")constresponse=awaitnewPromise(resolve=>{setTimeout(()=>{console.log("Submitting: ",fields);resolve(fields);},1000);});notify("submitSuccess",response);}catch(error){notify("submitError",error.message);}finally{setLoading(false);}}});return(<formonSubmit={form.handleSubmit}>{/* option 1 (control all the props with a one-liner)*/}<fieldset><legend>Option 1</legend><labelhtmlFor="email">{form.fields.email.error ?"Invalid" :""} email</label><input{...form.inputs.email("email")}/><labelhtmlFor="departure">{form.fields.arrival.error ?"Invalid" :""} arrival</label><input{...form.inputs.date("arrival")}// You can override props by simply defining them lastonChange={e=>form.handleChange(e,["minOneNight"])}/></fieldset>{/* option 2 specify id, type, name, value props manually*/}<fieldset><legend>Option 2</legend><labelhtmlFor="arrival">{form.fields.arrival.error ?"Invalid" :""} arrival</label><inputtype="date"id="arrival"name="arrival"value={form.fields.arrival.value}onChange={e=>form.handleChange(e,["minOneNight"])}/><labelhtmlFor="departure">{form.fields.departure.error ?"Invalid" :""} departure</label><inputtype="date"id="departure"name="departure"value={form.fields.departure.value}onChange={e=>form.handleChange(e,["minOneNight"])}/></fieldset>{/* also from option 1 */}<button{...form.inputs.submit()}disabled={form.loading}>        Submit</button></form>);};ReactDOM.render(<App/>,document.querySelector("#root"));

Documentation

useForm

useForm(useFormParams:UserFormParams):UseForm

UseFormParams

InitialState

useForm({initialState:{email:"",name:"",address:"",age:0}})

//...<FormProviderinitialStates={{login:{email:"email@example.com",password:""}}}>//...const form = useForm({name:"login"})console.log(form.fields.email.value) // email@example.com

Validators

functionvalidators(fields:object,isSubmitting:boolean):Validations

Validations

{email:submitting    ?isValidEmail(fields.email)    :typeoffields.email==="string"}

SubmitCallback

functiononSubmit(onSubmitParams:OnSubmitParams):void

NotifyCallback

typeNotifyType="validationErrors"|"submitError"|"submitSuccess"functionnotify(type:NotifyType,reason:any):void

UseFormReturn

FieldValuesAndErrors

constform=useForm({initialState:{email:"email@example.com",age:-2}})console.log(form.fields)// {//  email: {//   value: "email@example.com",//   error: false//  },//  age: {//   value: -2,//   error: truefields//  }// }console.log(form.hasErrors)// true

ChangeHandler

functionhandleChange(event:React.FormEvent,validations:string[]):voidfunctionhandleChange(fields:object,validations:string[]):void

SubmitHandler

functionhandleSubmit():void

InputPropGenerators

constform=useForm()form.inputs.datetimeLocal==form.inputs["datetime-local"]

functioninputType(name:string,options:InputTypeOptions):InputPropGeneratorsReturn

InputTypeOptions

constform=useForm(/*...*/)// *click on option-2*console.log(form.fields.radio.value)// option-2return(<radiogroup><input{...inputs.radio('radio',{value:'option-1'})}/><input{...inputs.radio('radio',{value:'option-2'})}/>{/*You can do it the "traditional" way also*/}<input{...inputs.radio('radio')}value='option-3'/></radiogroup>)

constform=useForm(/*...*/)return(<div><input{...form.inputs.email("emailField",{generateProps:({error})=>({className:error ?"email-error" :"email",})})}/>{/*Tip: if your custom Input component takes an error prop, you can try this: */}<Input{...form.inputs.email("emailField",{generateProps:_=>_})}/>{/* This will spread error to Input as well.*/}{/*Or here is a more complex example for a custom Input component*/}<Input{...form.inputs.email("emailField",{generateProps:({error, name})=>({          error,label:error ?`Invalid${name}` :name,placeholder:`Type${name}`})})}/></div>)

InputPropGeneratorsReturn

constform=useForm(/*...*/)return(<div><labelhtmlFor="emailField">E-mail</label><input{...form.inputs.email("emailField")}/>{/* This is the same as */}<inputname="emailField"id="emailField"type="email"onChange={form.handleChange}value={form.fields.emailField.value}/></div>)

FormProvider

functionFormProvider(formProviderProps:FormProviderProps):JSX.Element

FormProviderProps

getForms

functiongetForms() :Forms

Forms

LICENSE