feat: add onFieldChange

Author: deadrime

package.json

@@ -2,7 +2,7 @@
   "name": "react-any-shape-form",
   "author": "Eugene Trofimov",
   "license": "ISC",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "Small, type-friendly and flexible react form component.",
   "keywords": [
     "react",

src/Form.tsx

@@ -21,6 +21,7 @@ export type FormProps<
   initialState?: State
   children: React.ReactNode
   onFinish?: (state: State) => void
+  onFieldChange?: (field: keyof State, value: State[keyof State]) => void;
   className?: string
   style?: CSSProperties
   id?: string
@@ -37,6 +38,7 @@ export const Form = <
   const {
     children,
     onFinish,
+    onFieldChange,
     className,
     initialState,
     style,
@@ -79,6 +81,7 @@ export const Form = <
         formApi,
         formId: id,
         CSSPrefix,
+        onFieldChange,
       }}
     >
       <form

src/FormContext.ts

@@ -6,6 +6,7 @@ export type FormContextState<F extends FormApi<any> = FormApi<any>> = {
   formApi: F
   formId?: string
   CSSPrefix?: string
+  onFieldChange?: (field: string, value: any) => void
 }
 
 const formDefaultContext: FormContextState = {

src/FormItem.tsx

@@ -43,7 +43,7 @@ const FormItem = <Value, FieldName extends string = string, Children extends For
     renderLabel,
     validationDebounceDelay = 300,
   } = props;
-  const { formApi } = useFormContext()
+  const { formApi, onFieldChange } = useFormContext()
   const { value, setValue, id, CSSPrefix } = useFieldData<Value>(name, rules);
   const { errors, status } = useFieldValidation(formApi, name);
   const formItemId = idFromProps || id;
@@ -64,7 +64,8 @@ const FormItem = <Value, FieldName extends string = string, Children extends For
     stateRef.current.valueChanged = true;
     setValue(value);
     onChange?.(value);
-  }, [setValue, onChange]);
+    onFieldChange?.(name, value)
+  }, [setValue, onChange, name]);
 
   return (
     <div className={`${className || ''} ${CSSPrefix}__form-item`} style={style}>