The idea of this package is to have a collection of components that can be used with react-hook-form without having to write a lot of boilerplate code. And also to make the life of the developer easier so they don't have to figure out how to integrate external libraries with react-hook-form.
Supported input types:
- all standard html input types (text, email, number, etc.)
- date picker (react-datepicker)
- typeahead (react-bootstrap-typeahead)
- numeric / pattern formats (react-number-format)
npm install @neolution-ch/react-hook-form-components
yarn add @neolution-ch/react-hook-form-components
import { Form, Input } from 'react-hook-form-components';
interface FormInputs {
testInput: string;
}
....
<Form<FormInputs> onSubmit={(data) => console.log(data)}>
<Input<FormInputs> name={"testInput"} label={"Test Input"} />
<input type="submit" />
</Form>
To use it with yup please install @hookform/resolvers and yup.
To make your life easier you can use the method described in this blog article to get strongly typed validation schema from yup: Strongly typed validation schema with yup.
import { Form, Input } from 'react-hook-form-components';
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
interface FormInputs {
numberInput: number;
}
const schema = yup.object({
// this will trigger validation and show error message if the input is empty
// it will also convert the input value to a number
numberInput: yup.number().required(),
});
...
<Form<FormInputs> onSubmit={(data) => console.log(data)} resolver={yupResolver(schema)}>
<Input<FormInputs> name={"numberInput"} label={"Number Input"} type="number" />
<input type="submit" />
</Form>
To use typeahead you have to include their CSS file in your project:
import "react-bootstrap-typeahead/css/Typeahead.css";
Use the StaticTypeaheadInput
component for a static list of options.
<StaticTypeaheadInput name="inputName" options={["one", "two"]} label="Static Typeahead" />
Options can also be an array of LabelValueOption
objects. In this case you can have a different label and value.
<StaticTypeaheadInput
name="inputName"
options={[
{
label: "one",
value: "one",
},
{
label: "two",
value: "two",
},
]}
label="Static Typeahead"
/>
To use an async typeahead you have to provide a function that returns a promise. The function will be called with the current input value.
<AsyncTypeaheadInput
name="inputName"
queryFn={async (query) => {
return ["one", "two"];
}}
label="Async Typeahead"
/>
And also here you can have an array of LabelValueOption
objects.
<AsyncTypeaheadInput
name="inputName"
queryFn={async (query) => {
return [
{ value: "one", label: "one" },
{ value: "two", label: "two" },
];
}}
label="Async Typeahead"
/>
To use the DatepickerInput
component you have to include their CSS file in your project:
import "react-datepicker/dist/react-datepicker.css";
Basic example:
<DatePickerInput name="datepickerInput" label="Date Picker" />
You get full access to the react-datepicker component. So you can pass all props to the datePickerProps
prop of the DatePickerInput
component.
So for example if you don't like the default date format of dd.MM.yyyy you can change it to yyyy-MM-dd like this:
<DatePickerInput
name="datepickerInput"
label="Date Picker"
datePickerProps={{
dateFormat: "yyyy-MM-dd",
}}
/>
To use a numeric format (for example with a thousand seperator) you can use the Input
component and supply numericFormat
.
Refer to the react-number-format documentation for more information. If you use the numericFormat
prop and declare the variable as a number with yup, you will get the unformatted value in your onSubmit function.
<FormattedInput
name={"name"}
label={"Numeric Format"}
numericFormat={{
thousandSeparator: "'",
}}
/>
To use a pattern format (for example for a phone nr) you can use the Input
component and supply patternFormat
.
Refer to the react-number-format documentation for more information.
<FormattedInput
name={"name"}
label={"Pattern fomrat"}
patternFormat={{
format: "###-###-####",
allowEmptyFormatting: true,
mask: "_",
}}
/>
The storybook is a visual testing tool that makes it easy to test and tinker with the components.
It can be found at https://neolution-ch.github.io/react-hook-form-components