react-hook-form-hoc

# react-hook-form-hoc

## Introduction

`react-hook-form-hoc` - Reuseable Bootstrap Floating Labels Inputs. Higher Order Components built to enhance the usage of React Hook Form in your React applications. It's designed to streamline form development and make form handling more efficient and intuitive.

## Features

- Simplifies form creation and management using React Hook Form.
- Provides a set of pre-built components and utilities for common form patterns.
- Integrates seamlessly with popular libraries like Bootstrap, Moment.js, OTP Input React, React Bootstrap, React Datepicker, and React Input Mask.
- Offers easy validation setup for your form inputs.

## Installation

You can install `react-hook-form-hoc` via npm or yarn:

```bash | command prompt
npm install react-hook-form-hoc

yarn install react-hook-form-hoc
```

Usage

To start using react-hook-form-hoc in your project, simply import the necessary components and utilities from the package and incorporate them into your forms.

import { useForm } from "react-hook-form";
import { InputText } from "../InputText";
import "../assets/css/styles.min.css";
import { InputTextarea } from "../InputTextarea";
import { InputSelect } from "../InputSelect";
import { InputDatePicker } from "../InputDatePicker";
import { InputFile } from "../InputFile";
import { useState } from "react";
import { InputGeoLocation } from "../InputGeoLocation";

export const ReactHookFormUsage = () => {
  const {
    register,
    handleSubmit,
    isSubmitting,
    watch,
    setValue,
    getValues,
    control,
    formState: { errors },
    reset,
  } = useForm({
    mode: "onTouched",
  });
  const [location, setLocation] = useState();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form autoComplete="off" onSubmit={handleSubmit(onSubmit)}>
      <InputText
        label="Simple InputText Label"
        type="text | email | password"
        placeholder="placeholder"
        name="name_InputText"
        register={register} // react-hook-form Register required for the field to make it work with
        error={errors["name_InputText"]}
        validations={{
          required: {
            value: true,
            message: "Required Field",
          },
          pattern: {
            value: "Add your regex pattern",
            message: "Add your validation messages",
          },
        }}
        readOnly={false} // True / False
        disabled={false} // True / False
      />

      <InputText
        label="Masked InputText Label"
        name="cnic"
        placeholder="CNIC"
        register={register}
        mask="99999-9999999-9"
        control={control}
        error={errors["cnic"]}
        validations={{
          required: {
            value: true,
            message: "Required field",
          },
          pattern: {
            value: "Adding regex",
            message: "Required field",
          },
        }}
        readOnly={false} // True / False
        disabled={false} // True / False
      />

      <InputTextarea
        label="Input Textarea Label"
        maxLength="255" // Max Character Length
        height={125} // Can adjust the height of the textarea
        name="name_Textarea" // The name of the field
        placeholder="placeholder" // The placeholder
        register={register} //
        rows={4} // Number of rows
        readOnly={false} // True / False
        disabled={false} // True / False
      />

      <InputSelect
        // NOTE: This is react-select which requires an object onChange: setValue({label: string, value: string | integer})
        label="Input Select Label"
        name="name_InputSelect"
        value={getValues("name_InputSelect")}
        options={{ label: "label", value: "value" }}
        onChange={(option) => {
          setValue("name_InputSelect", option, {
            shouldDirty: true,
          });
        }}
        control={control}
        register={register}
        error={errors["name_InputSelect"]}
        validations={{
          required: {
            value: true,
            message: "Required Field",
          },
          pattern: {
            value: "Add your regex pattern",
            message: "Add your validation messages",
          },
        }}
      />

      <InputDatePicker
        label="Input DatePicker"
        name="name_InputDatePicker"
        date={getValues("name_InputDatePicker")}
        onChange={(date) => {
          setValue("name_InputDatePicker", date);
        }}
        control={control}
        register={register}
        error={errors["name_InputDatePicker"]}
        validations={{
          required: {
            value: true,
            message: "Required field",
          },
        }}
      />

      <InputFile
        label="Inpiut FileUpload"
        name="fileUpload"
        onChange={() => {
          setValue("fileUpload", e.target.files[0]);
        }}
        register={register}
        error={errors["fileUpload"]}
        validations={{
          required: {
            value: true,
            message: "Required field",
          },
        }}
      />

      <InputGeoLocation
        label="Location"
        name="userLocation"
        location={location}
        setLocation={setLocation}
        error={errors["userLocation"]}
      />

      <button type="submit" className="btn btn-primary">
        Submit
      </button>
    </form>
  );
};

Credits

react-hook-form-hoc wouldn't have been possible without the contributions of several open-source libraries and projects. I extend my gratitude to the following:

• React Hook Form
• React Bootstrap
• Moment.js
• OTP Input React
• React Bootstrap
• React Datepicker
• React Input Mask

Contributions

Contributions to react-hook-form-hoc are welcome! If you have any ideas for improvements, new features, or bug fixes, feel free to open an issue or submit a pull request on the GitHub repository.

License

This project is licensed under the MIT License. See the LICENSE file for details.