@cartoonmangodev/react-form-handler

[@cartoonmangodev/react-form-handler]() is a React library for simplifying form validation. It provides a set of utilities and hooks to handle client-side form validation with ease.

Key features include:

> Declarative Validation Rules: Define validation rules in a declarative manner.

> Dynamic Validation: Handle dynamic validation based on user input.

> Custom Validation Functions: Support for custom validation functions.

# Installation

This package requires React 16.8.4 or later.

Use the package manager npm or yarn to install @cartoonmangodev/react-form-handler.

``bash
$ npm install @cartoonmangodev/react-form-handler
`

or

`bash
$ yarn add @cartoonmangodev/react-form-handler
`

# Basic Example

`js
/ form.js /
import { FormProvider } from "@cartoonmangodev/react-form-handler";
export const { useForm, useFormRef } = FormProvider();

/ hook.js /
import { useForm } from "./form.js";
export const useFormHook = () =>
useForm({
FORM_CONFIG: {
name: { isRequired: true },
age: { min: 18, max: 16 },
},
});

/ customInputField.js /
import { useFormConsumer } from "@cartoonmangodev/react-form-handler";
const InputField = React.memo((props) => {
const { id, name, ...restProps } = props;
const { inputProps } = useFormConsumer({ id });
return (


/ basicForm.js /
import { useEffect, useRef } from "react";
import { Form } from "@cartoonmangodev/react-form-handler";
import { useFormHook } from "./hook.js";
import { InputField } from "./customInputField.js";
export const BasicForm = () => {
const { formRef, formId } = useFormHook();
return (



Submit

);
};
`

# Basic usage

# Form Configuration

Note:
- Its required to configure form Provider before start using useForm hook
- Global config (one time configuration)

`js
/ form.js /
import { FormProvider, Form } from "@cartoonmangodev/react-form-handler";
import {
ON_CHANGE,
ON_BLUR,
ON_CHANGE,
ERROR,
ON_CHANGE_TEXT,
} from "@cartoonmangodev/react-form-handler/constants";
const { useForm, useFormRef } = FormProvider({
ON_CHANGE_KEY: ON_CHANGE / use ON_CHANGE_TEXT if you are using react-native /,
ON_BLUR_KEY: ON_BLUR,
VALUE_KEY: VALUE,
ERROR_KEY: ERROR,
});
export { useForm, useFormRef, Form };
`

Hooks and Components

> useForm: A hook for managing form state.

> useFormRef: A hook for obtaining a reference to the form.

> Form: A form component for use in React components.

# Getting inputprops using hook

`js
/ customInputField.js /
import { useFormConsumer } from "@cartoonmangodev/react-form-handler";

const InputField = React.memo((props) => {
const { id, name, ...restProps } = props;
const { inputProps } = useFormConsumer({ id });
return (


#### - One significant advantage of using the context-based implementation provided by @cartoonmangodev/react-form-handler is its ability to minimize unnecessary component re-renders on every onChange.

#### - By managing form state through the FormProvider, components subscribing to the form state will only re-render when relevant form data changes. This can lead to improved performance in scenarios where frequent re-renders are not desired.

# Getting inputprops using context

`js
/ customInputField.js /
import { Form } from "@cartoonmangodev/react-form-handler";

export const InputField = React.memo((props) => {
const { id, name, ...restProps } = props;
return (
id={id}
inputConfig={{
isRequired: false,
}}
>
{({ inputProps }) => (


`js
/ hook.js /
import { useForm } from "./form.js";
`

$3

Define your form configuration using FORM_CONFIG. Each field in the form has specific validation rules.

`js
const FORM_CONFIG = {
name: { isRequired: true },
age: { min: 18, max: 16 },
company: { isRequired: true },
};
`

$3

Initialize the form hook using useForm and provide the FORM_CONFIG and initial state.

`js
const initialState = {
name: "",
}; / optional - default state /
export const useFormHook = () =>
useForm({
FORM_CONFIG,
initialState,
});
`

$3

`js
import { useForm } from "./form.js";
const FORM_CONFIG = {
name: { isRequired: true },
age: { min: 18, max: 16 },
company: { isRequired: true },
};
export const useFormHook = () =>
useForm({
FORM_CONFIG,
initialState: {
name: "",
},
});
`

# using form hook in component

$3

`js
/ basicForm.js /
import { useEffect, useRef } from "react";
import { useFormHook, Form } from "./hook.js";
import { InputField } from "./customInputField.js";
`

$3

The BasicForm component utilizes the useFormHook to manage form state and the Form.
Form.Provider to wrap the form elements.

`js
const BasicForm = () => {
const { formRef, formId } = useFormHook();
return (




Submit

);
};
`

$3

`js
/ basicForm.js /
import { useEffect, useRef } from "react";
import { useFormHook, Form } from "./hook.js";
import { InputField } from "./customInputField.js";

const BasicForm = () => {
const { formRef, formId } = useFormHook();
return (




Submit

);
};

export BasicForm;
`

# creating nested form hook config

$3

`js
/ basicForm.js /
import { newSchema } from "@cartoonmangodev/react-form-handler";
import { useForm } from "./form.js";
`

$3

Define your nested form configuration using newSchema. In this example, we have a person schema with nested properties.

`js
const FORM_CONFIG = {
person: newSchema({
name: { isRequired: true },
age: { min: 18, max: 16 },
company: {
isRequired: true,
inputProps: {
disabled: true,
},
},
}),
};
`

$3

Initialize the form hook using useForm and provide the FORM_CONFIG with nested schema.

`js
export const useFormHook = () =>
useForm({
FORM_CONFIG,
});
`

$3

`js
/ hook.js /
import { newSchema } from "@cartoonmangodev/react-form-handler";
import { useForm } from "./form.js";

const FORM_CONFIG = {
person: newSchema({
name: { isRequired: true },
age: { min: 18, max: 16 },
company: { isRequired: true },
}),
};
export const useFormHook = () =>
useForm({
FORM_CONFIG,
});
`

# nested form

`js
/ schemaForm.js /
import { useEffect, useRef } from "react";
import { useFormHook, Form } from "./hook.js";
import { InputField } from "./customInputField.js";

const schemaForm = () => {
const { formRef, formId } = useFormHook();
console.log(formRef);
const submit = useCallback(() => {
console.log(formRef.validateForm());
}, []);
return (






Submit

);
};
`

1. This is the image from console FormRef object

!

2. This is the image from console after submitting form

!

# creating formArray hook config

`js
/ hook.js /
import { newFormArray } from "@cartoonmangodev/react-form-handler";
import { useForm } from "./form.js";

const FORM_CONFIG = {
person: newFormArray({
name: { isRequired: true },
age: { min: 18, max: 16 },
comapny: { isRequired: true },
}),
};
export const useFormHook = () =>
useForm({
FORM_CONFIG,
});
`

# FormArray

`js
/ schemaForm.js /
import { useEffect, useRef } from "react";
import { useFormHook, Form } from "./hook.js";
import { InputField } from "./customInputField.js";

const schemaForm = () => {
const { formRef, formId } = useFormHook();
console.log(formRef);
const submit = useCallback(() => {
console.log(formRef.validateForm());
}, []);
return (


{({ formRef: _formRef, form, formId, count, index }, arrayProps) => (




> append
prepend
delete
reset
clear
move
swap
insert
clone
{console.log(arrayProps)}

)}

Submit

);
};
`

$3

> - The useFormHook is used to obtain the form reference and form ID.
> - The Form.Provider wraps the entire form and provides context for form handling.
> - The Form.Multiple component is used to handle a dynamic array of form elements.
> - The InputField component is used for each form field within the dynamic array.
> - Various form manipulation buttons (append, prepend, delete,reset,clear,move,swap, insert,clone,etc.) are provided to showcase the dynamic form functionality.
> - The submit function is a callback that triggers form validation and logs the result.

!

!

Form Array methods

!

# Access FormRef Object using useformRef hook

`js
/ hook.js /
import { useFormRef } from "./hook.js";

const form = ({ formId }) => {
const { formRef, formId } = useFormRef(formId);
console.log(formRef.getValues());
console.log(formRef.getErrors());
};
`

# inputProps -