Skip to content

code4bones/react-cascade-forms

Repository files navigation

Cascade Forms - state-driven container/controls renderer

Simple engine for render component / group depends on common state

yarn install @code4bones/react-cascade-forms

importCascadeForms,{FormItems,ControlRenderProps,FormState,FormItem,OnChangeFn,FormActions}from"@code4bones/react-cascade-forms"; ... constFORM : FormItems=[ ... ]// check samples !constactions=createRef<FormActions>();const[formState,setFormState]=React.useState<FormState>({name:{// default state, conforms to FormStatevalue:"",}});constonRender=(formState:FormState,item:FormItem,onChange:OnChangeFn)=>{switch(item.type){case"custom": // Signature = FormControlRenderFnreturn<CustomCtrlformState={formState}item={item}onChange={onChange}/>;default: return<div>Unexpected type {item.type}</div>}}constonUpdate=(state:any)=>{console.log("Live State",state);setFormState(state);};constonReadState=()=>{// read active values ( visible ) onlyconststate=actions.current?.getState();/* state{ [id]:{ value:..., state: // => false if no error, or joined string from ValidationError[] (fastest-validator)  } } */console.log("Actual state",state);};<CascadeFormsref={actions}form={FORM}formState={formState}onRender={onRender}onUpdate={onUpdate}/><Buttontext="Read state"onClick={onReadState}/> ...

Samples available via storybook.

That's all, folks !

About

React state-driver control renderer

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published