react-form-manage 1.0.8-beta.2 → 1.0.8-beta.3

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.8-beta.3] - 2026-01-22
+
+- Add `UseFormItemStateWatchReturn` type export for `useFormItemStateWatch` hook
+- Explicit return typing with `FormFieldError[]` for better TypeScript support
+
 ## [1.0.8-beta.2] - 2026-01-22
 
 - Add isTouched field to FormItem for tracking user interaction state

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import Form, { useForm, useWatch, useSubmitDataWatch, useFormStateWatch, type FormProps, type ValidationRule, type FormFieldError, type SubmitState } from "./providers/Form";
+import Form, { useForm, useWatch, useSubmitDataWatch, useFormStateWatch, type FormProps, type ValidationRule, type FormFieldError, type SubmitState, type UseFormItemStateWatchReturn } from "./providers/Form";
 import { SUBMIT_STATE } from "./constants/form";
 import FormItem, { type FormItemProps } from "./components/Form/FormItem";
 import FormList, { type FormListProps } from "./components/Form/FormList";
@@ -6,5 +6,5 @@ import Input from "./components/Input";
 import InputWrapper, { type InputWrapperProps } from "./components/Form/InputWrapper";
 import useFormItemControl from "./hooks/useFormItemControl";
 import useFormListControl from "./hooks/useFormListControl";
-export { Form, FormItem, FormList, Input, InputWrapper, useFormItemControl, useFormListControl, useForm, useWatch, useSubmitDataWatch, useFormStateWatch, type FormProps, type FormItemProps, type FormListProps, type InputWrapperProps, type ValidationRule, type FormFieldError, type SubmitState, SUBMIT_STATE, };
+export { Form, FormItem, FormList, Input, InputWrapper, useFormItemControl, useFormListControl, useForm, useWatch, useSubmitDataWatch, useFormStateWatch, type FormProps, type FormItemProps, type FormListProps, type InputWrapperProps, type ValidationRule, type FormFieldError, type SubmitState, type UseFormItemStateWatchReturn, SUBMIT_STATE, };
 export default Form;

package/dist/providers/Form.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentType, FormHTMLAttributes, ReactNode } from "react";
-import type { PublicFormInstance } from "../types/public";
-export type { ValidationRule, FormFieldError, SubmitState } from "../types/public";
+import type { PublicFormInstance, UseFormItemStateWatchReturn } from "../types/public";
+export type { FormFieldError, SubmitState, ValidationRule, UseFormItemStateWatchReturn, } from "../types/public";
 export declare const FormContext: import("react").Context<any>;
 export interface FormProps<T = any> extends Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
     children: ReactNode;
@@ -21,6 +21,7 @@ declare namespace Form {
     var useWatch: typeof import("./Form").useWatch;
     var useSubmitDataWatch: typeof import("./Form").useSubmitDataWatch;
     var useFormStateWatch: <T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>) => any;
+    var useFormItemStateWatch: <T = any>(nameOrFormItemId: string, formNameOrFormInstance?: string | PublicFormInstance<T>) => UseFormItemStateWatchReturn;
 }
 export default Form;
 export declare function useFormContext(): any;
@@ -32,3 +33,4 @@ export declare function useSubmitDataWatch<T = any>({ formNameOrFormInstance, tr
     mapFn?: (v: any, prev: any) => any;
 }): T | undefined;
 export declare const useFormStateWatch: <T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>) => any;
+export declare const useFormItemStateWatch: <T = any>(nameOrFormItemId: string, formNameOrFormInstance?: string | PublicFormInstance<T>) => UseFormItemStateWatchReturn;

package/dist/providers/Form.js

@@ -287,15 +287,28 @@ const useFormStateWatch = (formNameOrFormInstance) => {
   });
   return formState;
 };
+const useFormItemStateWatch = (nameOrFormItemId, formNameOrFormInstance) => {
+  const [formInstance] = useForm(formNameOrFormInstance);
+  const listener = useFormStore((state) => {
+    return state.getListeners().find((l) => l.formName === (formInstance == null ? void 0 : formInstance.formName) && (l.name === nameOrFormItemId || l.formItemId === nameOrFormItemId));
+  });
+  return {
+    isTouched: listener == null ? void 0 : listener.isTouched,
+    isDirty: listener == null ? void 0 : listener.isDirty,
+    errors: (listener == null ? void 0 : listener.internalErrors) || []
+  };
+};
 Form.useForm = useForm;
 Form.useWatch = useWatch;
 Form.useSubmitDataWatch = useSubmitDataWatch;
 Form.useFormStateWatch = useFormStateWatch;
+Form.useFormItemStateWatch = useFormItemStateWatch;
 export {
   FormContext,
   Form as default,
   useForm,
   useFormContext,
+  useFormItemStateWatch,
   useFormStateWatch,
   useSubmitDataWatch,
   useWatch

package/dist/types/public.d.ts

@@ -61,6 +61,11 @@ export interface UseFormItemReturn<T = any> {
     isDirty?: boolean;
     submitState?: SubmitState;
 }
+export interface UseFormItemStateWatchReturn {
+    isTouched?: boolean;
+    isDirty?: boolean;
+    errors: FormFieldError[];
+}
 export interface UseFormListProps<T = any> {
     name?: string;
     form?: PublicFormInstance<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-manage",
-  "version": "1.0.8-beta.2",
+  "version": "1.0.8-beta.3",
   "description": "Lightweight React form management with list and listener support.",
   "license": "MIT",
   "type": "module",

package/src/index.ts

@@ -7,6 +7,7 @@ import Form, {
   type ValidationRule,
   type FormFieldError,
   type SubmitState,
+  type UseFormItemStateWatchReturn,
 } from "./providers/Form";
 import { SUBMIT_STATE } from "./constants/form";
 
@@ -37,6 +38,7 @@ export {
   type ValidationRule,
   type FormFieldError,
   type SubmitState,
+  type UseFormItemStateWatchReturn,
   SUBMIT_STATE,
 };
 

package/src/providers/Form.tsx

@@ -6,9 +6,14 @@ import { flushSync } from "react-dom";
 import { useShallow } from "zustand/react/shallow"; // Import useShallow
 import FormCleanUp from "../components/Form/FormCleanUp";
 import { useFormListeners, useFormStore } from "../stores/formStore";
-import type { PublicFormInstance } from "../types/public";
+import type { PublicFormInstance, UseFormItemStateWatchReturn } from "../types/public";
 import { getAllNoneObjStringPath } from "../utils/obj.util";
-export type { ValidationRule, FormFieldError, SubmitState } from "../types/public";
+export type {
+  FormFieldError,
+  SubmitState,
+  ValidationRule,
+  UseFormItemStateWatchReturn,
+} from "../types/public";
 
 export const FormContext = createContext(null);
 
@@ -472,7 +477,33 @@ export const useFormStateWatch = <T = any,>(
   return formState as any;
 };
 
+// Get Form Item State Using name (make sure no same name listener before using this) or formItemId, formNameOrFormInstance
+// reutrn formItem state like isTouched, isDirty, errors
+export const useFormItemStateWatch = <T = any,>(
+  nameOrFormItemId: string,
+  formNameOrFormInstance?: string | PublicFormInstance<T>,
+): UseFormItemStateWatchReturn => {
+  const [formInstance] = useForm<T>(formNameOrFormInstance as any);
+
+  const listener = useFormStore((state) => {
+    return state
+      .getListeners()
+      .find(
+        (l) =>
+          l.formName === formInstance?.formName &&
+          (l.name === nameOrFormItemId || l.formItemId === nameOrFormItemId),
+      );
+  });
+
+  return {
+    isTouched: listener?.isTouched,
+    isDirty: listener?.isDirty,
+    errors: listener?.internalErrors || [],
+  };
+};
+
 Form.useForm = useForm;
 Form.useWatch = useWatch;
 Form.useSubmitDataWatch = useSubmitDataWatch;
 Form.useFormStateWatch = useFormStateWatch;
+Form.useFormItemStateWatch = useFormItemStateWatch;

package/src/types/public.ts

@@ -67,6 +67,12 @@ export interface UseFormItemReturn<T = any> {
   submitState?: SubmitState;
 }
 
+export interface UseFormItemStateWatchReturn {
+  isTouched?: boolean;
+  isDirty?: boolean;
+  errors: FormFieldError[];
+}
+
 export interface UseFormListProps<T = any> {
   name?: string;
   form?: PublicFormInstance<T>;