Visio React-Hook-Form base components

Here we have a set of reusable controlled input components designed to be used with react-hook-form to handle forms and yup to handle validation.

Installation

yarn add visio-react-base

npm install visio-react-base

Libraries we used

react-hook-form

yup

MUI

dayjs

react-number-format

axios-hooks

Basic usage

Import the component or components you want to use and plug them in your form. See example below:

import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import {InputText} from "visio-rhf-base";
...

const schema = yup.object().shape({
  name: yup.string(),
})

const { ...methods } = useForm({
  resolver: yupResolver(schema),
  defaultValues: {
    name: "",
  },
});
<form>
  <InputText
    name="name"
    control={methods.control}
    label="Name"
    fullWidth
  />
  <Button type="submit">Send</Button>
</form>

We don't require the use of react-hook-form useFormContext wrapping the form for these simple components, but feel free to use it.

Available components

InputText

Most basic of the elements, designed to accept text or number, you can pass all the attributes available for TextField.

<InputText
  name="name"
  control={methods.control}
  label="Name"
/>

InputNumber

This is a TextField which is going to format your text as a number as you type, UI will look as a number field. We use react-number-format to handle formatting and value submission.

<InputNumber
  name="creditScore"
  control={methods.control}
  label="Credit Score"
/>

InputCurrency

This is a TextField which is going to format your text as a US currency while you type. This field displays a formatted US currency text and send a float value to the form. We use react-number-format to handle formatting and value submission.

<InputCurrency
  name="amount"
  control={methods.control}
  label="Amount"
/>

InputPhone

This is a TextField which is going to format your text as a US phone number while you type and send the formatted text to the form. We use react-number-format to handle formatting and value submission.

<InputPhone
  name="phone"
  control={methods.control}
  label="Phone"
/>

InputPercentage

This is a TextField which is going to format your text as a % number. Will display a percentage format but will send a decimal to the form, for example: a value of 0.9 will be displayed as 90%. We use react-number-format to handle formatting and value submission.

<InputPercentage
  name="progress"
  control={methods.control}
  label="Progress"
/>

InputSSN

This is a TextField which is going to format your text as a US Social Security Number. The maximum amount of characters accepted is 9 and the input will be masked by default, you can hide and show the value, clicking on the "eye" icon on the right. We send back a formatted value to the form. You can pass all the attributes available for TextField.

<InputSSN
  name="ssn"
  control={methods.control}
  label="Social Security Number"
/>

InputFEIN

This is a TextField which is going to format your text as a US Federal Identification Number (Tax Id). The maximum amount of characters accepted is 9 and the input will be formatted as you type "12-3456789". We send back a formatted value to the form. You can pass all the attributes available for TextField.

<InputFEIN
  name="fein"
  control={methods.control}
  label="FEIN"
/>

InputDate

This is a MUI Date-Picker, this field will handle dates and submit dates to the form.

<InputDate
  name="birthday"
  control={methods.control}
  label="Birthday"
/>

InputSelect

Select component which is going to accept a group of options and display them as a combobox.

<InputSelect
  name="contactMethod"
  control={methods.control}
  label="Contact Method"
  options={{label: "Phone", value: "Phone"},{label: "Email", value: "Email"}}
/>

InputRadio

Radio component which is going to accept a group of options and display them as radio options.

<InputRadio
  name="contactMethod"
  control={methods.control}
  label="Contact Method"
  options={{label: "Phone", value: "Phone"},{label: "Email", value: "Email"}}
/>

InputCheckbox

Checkbox component to render boolean fields. It will send a boolean value to the form

<InputCheckbox
  name="vaccinated"
  control={methods.control}
  label="Vaccinated?"
/>

InputMultiselect

Select component which is going to accept a group of options and display them as a combobox. The difference between this component and InputSelect is that you can select multiple options. Form will receive an array with the values.

<InputMultiselect
  name="colors"
  control={methods.control}
  label="Colors"
  options={{label: "Blue", value: "Blue"},{label: "Red", value: "Red"}}
/>

InputMultiselectCheckbox

Checkbox component which is going to accept a group of options and display them as a group of checkbox. The difference between this component and InputCheckbox is that you can select multiple options. Form will receive an array with the values.

<InputMultiselectCheckbox
  name="colors"
  control={methods.control}
  label="Colors"
  options={{label: "Blue", value: "Blue"},{label: "Red", value: "Red"}}
/>