JSPM – react-hook-form-hoc@1.3.0

Package Exports

react-hook-form-hoc
react-hook-form-hoc/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-hook-form-hoc) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

# 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 {
  InputText,
  InputTextarea,
  InputSelect,
  InputDatePicker,
  InputFile,
} from "react-hook-form-hoc";
import { useForm } from "react-hook-form";

// Example usage
const MyForm = () => {
  const {
    register,
    handleSubmit,
    isSubmitting,
    watch,
    setValue,
    getValues,
    control,
    formState: { errors },
    reset,
  } = useForm({
    mode: "onTouched",
  });
  // Additional form handling logic...
  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: validate.REQUIRED_FIELD,
          },
          pattern: {
            value: validate.CNIC_REGEX,
            message: validate.INVALID_CNIC,
          },
        }}
        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",
          },
        }}
        isClearable={isClearable} // true or false
        isSearchable={isSearchable} // true or false
        isDisabled={isDisabled} // true or false
        isReadOnly={isReadOnly} // true or false
      />

      <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: validate.REQUIRED_FIELD,
          },
        }}
        readOnly={false} // True / False
        disabled={false} // True / False
      />

      <InputFile
        label="Inpiut FileUpload"
        name="fileUpload"
        onChange={() => {
          setValue("fileUpload", e.target.files[0]);
        }}
        register={register}
        error={errors["fileUpload"]}
        validations={{
          required: {
            value: true,
            message: validate.REQUIRED_FIELD,
          },
        }}
      />
    </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:

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.