0.2.5 • Published 3 months ago
@formulier/react v0.2.5
@formulier/react
Simple, performant form library for React
Docs
Find the docs at https://vjee.github.io/formulier/.
Example
import {
FormProvider,
useCreateForm,
useFormInstance,
useFormField,
useSubmitHandler,
} from '@formulier/react'
function MyForm() {
const form = useCreateForm({
initialValues: {
firstName: 'Nico',
age: 26,
},
})
const onSubmit = useSubmitHandler(form, values => {
// handle form submission
console.log(`${values.firstName} is ${values.age} years old.`)
})
return (
<form onSubmit={onSubmit}>
<FormProvider form={form}>
<TextField name="firstName" placeholder="First name" />
<IntegerField name="age" placeholder="Age" />
<button type="submit">Submit</button>
</FormProvider>
</form>
)
}
function TextField({name, placeholder}) {
const form = useFormInstance()
const [field] = useFormField(form, {name})
return (
<input
type="text"
placeholder={placeholder}
{...field}
value={field.value || ''}
onChange={event => field.onChange(event.target.value)}
/>
)
}
function IntegerField({name, placeholder}) {
const form = useFormInstance()
const [field] = useFormField(form, {name})
return (
<input
type="number"
placeholder={placeholder}
{...field}
value={field.value || ''}
onChange={event => field.onChange(parseInt(event.target.value, 10))}
/>
)
}
0.2.5
3 months ago
0.2.1
3 months ago
0.2.0
3 months ago
0.2.3
3 months ago
0.2.2
3 months ago
0.2.4
3 months ago
0.1.0
3 months ago
0.1.2
3 months ago
0.1.1
3 months ago
0.0.16
1 year ago
0.0.17
1 year ago
0.0.18
1 year ago
0.0.19
1 year ago
0.0.12
2 years ago
0.0.13
2 years ago
0.0.14
1 year ago
0.0.15
1 year ago
0.0.11
2 years ago
0.0.10
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago