Fomir
A Schema-First form library
Installation
npm install fomir
Quick Start
function BasicForm() {
const form = useForm({
onSubmit(values) {
alert(JSON.stringify(values, null, 2))
console.log('values', values)
},
children: [
{
label: 'First Name',
name: 'firstName',
component: 'Input',
value: '',
},
{
label: 'Last Name',
name: 'lastName',
component: 'Input',
value: '',
},
{
component: 'Submit',
text: 'submit',
},
],
})
return <Form form={form} />
}
Markup Schema
Fomir also supports building form using markup.
function BasicForm() {
const form = useForm({
onSubmit(values) {
alert(JSON.stringify(values, null, 2))
console.log('values', values)
},
})
return (
<Form form={form}>
<h2>Basic Info</h2>
<Box bgGray100 rounded p3 mb4>
<Field component="Input" label="First Name" name="firstName" />
<Field component="Input" label="Last Name" name="lastName" />
</Box>
<h2>Extra Info</h2>
<Box bgGray100 rounded p3 mb4>
<Field component="Input" label="Email" name="email" />
<Field component="Textarea" label="Bio" name="bio" />
</Box>
<button>Submit</button>
</Form>
)
}
Documentation
Documentation website: fomir.vercel.app