In general it's a medical insurance system that help patient and clinic to manage their business and make it easy to manage the insurance process. This app will help with managing the bills the users the doctors everything about the clinic, patient and insurance company.
According to my NDA I can't share the features of the app. Instead I'll be talking about the dev challenges that I can share.
You can find their website hereProblem:
The app has a lot of forms that require a lot of fields and validation.
Some of the forms are dynamic and can be changed by the user.
Solution:
Creating a form require multiple steps the first one is
Example:
Usually that's what we have to do when creating a form with validation using react-hook-form and yup
import { useForm } from "react-hook-form"
import { yupResolver } from "@hookform/resolvers/yup"
import * as yup from "yup"
const schema = yup
.object({
firstName: yup.string().required(),
age: yup.number().positive().integer().required(),
})
.required()
export default function App() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(schema),
})
const onSubmit = (data) => console.log(data)
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("firstName")} />
<p>{errors.firstName?.message}</p>
<input {...register("age")} />
<p>{errors.age?.message}</p>
<input type="submit" />
</form>
)
}
But with the form builder we can do it like this
import { useForm } from "react-hook-form"
import { yupResolver } from "@hookform/resolvers/yup"
import * as yup from "yup"
const schema = yup
.object({
firstName: yup.string().required().renderInput(FormBuilderInput.TEXT,{}),
age: yup.number().positive().integer().required().renderInput(FormBuilderInput.TEXT,{}),
})
.required()
export default function App() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(schema),
})
const onSubmit = (data) => console.log(data)
return (
<FormBuilder
header={<button onClick={() => methods.handleSubmit(submit)()} />}
methods={methods}
formSchema={schema}
/>
)
}
Render Input:
Specify the type of input that you want to render
const schema = yup
.object({
firstName: yup.string().required().renderInput(FormBuilderInput.TEXT,{}),
dob: yup.date().required().renderInput(FormBuilderInput.DATE,{}),
gender: yup.date().required().renderInput(FormBuilderInput.AUTOCOMPLETE,{
inputProps: { options: []}})
})
.required()
you can also pass the props to the input and no need to add label for each input it will be added automatically fron the schema label
const schema = yup
.object({
firstName: yup.string().required().label("First Name").renderInput(FormBuilderInput.TEXT,{
inputProps: { style: { color: "red" }}}),
})
.required()
Render Custom:
didn't like the default input? you can create your own input and pass it to the form builder
const schema = yup
.object({
firstName: yup.string().required().label("First Name")
.renderCustom(param => (<MyCustomField {...param} />)
}).required()
renderCustom params
renderCustom(({ field: { onChange, onBlur, value, ref } }) => (
<ReactDatePicker
onChange={onChange} // send value to hook form
onBlur={onBlur} // notify when input is touched/blur
selected={value}
/>
))
all the feature of react-hook-form are accessible by form Builder.
Read More About Controller Props react-hook-form Controller
Form Builder Has more:
There is many other features that I can explain but it'll take a lot of time it's a very large library You can have nested forms, overwrite the header and footer, overwrite the form sections and style, add extra sections and more