Quick start
#
Installationbash
yarn add @buildo/formo
bash
yarn add @buildo/formo
important
formo
assumes react
as peer dependency, so make you have it
installed
#
ExampleHere's a very basic example of how you may use formo
.
In the next sections we will see some reccomendations on how to make it even more convenient to use.
tsx
import {validators ,useFormo ,success } from "@buildo/formo";Âexport constMyForm = () => {const {fieldProps ,handleSubmit } =useFormo ({initialValues : {fullName : "",acceptsTerms : false,},fieldValidators : () => ({acceptsTerms :validators .checked ("You must accept terms and conditions"),}),},{onSubmit : async (values ) =>success (values ),});Âreturn (<form ><div ><label htmlFor ={fieldProps ("fullName").name } /><input type ="text"id ={fieldProps ("fullName").name }name ={fieldProps ("fullName").name }value ={fieldProps ("fullName").value }onChange ={(e ) =>fieldProps ("fullName").onChange (e .currentTarget .value )}onBlur ={fieldProps ("fullName").onBlur }/></div >Â<div ><input type ="checkbox"id ={fieldProps ("acceptsTerms").name }name ={fieldProps ("acceptsTerms").name }checked ={fieldProps ("acceptsTerms").value }onChange ={(e ) =>fieldProps ("acceptsTerms").onChange (e .currentTarget .checked )}onBlur ={fieldProps ("acceptsTerms").onBlur }/><label htmlFor ={fieldProps ("acceptsTerms").name }>Accept terms and conditions</label ><p >{fieldProps ("acceptsTerms").issues ?.map ((issue ) => (<span key ={issue }>{issue }</span >))}</p ></div >Â<button onClick ={handleSubmit }>Submit</button ></form >);};
tsx
import {validators ,useFormo ,success } from "@buildo/formo";Âexport constMyForm = () => {const {fieldProps ,handleSubmit } =useFormo ({initialValues : {fullName : "",acceptsTerms : false,},fieldValidators : () => ({acceptsTerms :validators .checked ("You must accept terms and conditions"),}),},{onSubmit : async (values ) =>success (values ),});Âreturn (<form ><div ><label htmlFor ={fieldProps ("fullName").name } /><input type ="text"id ={fieldProps ("fullName").name }name ={fieldProps ("fullName").name }value ={fieldProps ("fullName").value }onChange ={(e ) =>fieldProps ("fullName").onChange (e .currentTarget .value )}onBlur ={fieldProps ("fullName").onBlur }/></div >Â<div ><input type ="checkbox"id ={fieldProps ("acceptsTerms").name }name ={fieldProps ("acceptsTerms").name }checked ={fieldProps ("acceptsTerms").value }onChange ={(e ) =>fieldProps ("acceptsTerms").onChange (e .currentTarget .checked )}onBlur ={fieldProps ("acceptsTerms").onBlur }/><label htmlFor ={fieldProps ("acceptsTerms").name }>Accept terms and conditions</label ><p >{fieldProps ("acceptsTerms").issues ?.map ((issue ) => (<span key ={issue }>{issue }</span >))}</p ></div >Â<button onClick ={handleSubmit }>Submit</button ></form >);};