Extend useForm with plain data object

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/use-ajv-form",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Custom React Hook that integrates with Ajv JSON Schema Validator",
   "main": "dist/use-ajv-form.es.js",
   "author": "Aleksandar Grbic",

src/index.ts

@@ -187,6 +187,12 @@ const useAJVForm = <T extends Record<string, any>>(
     onBlur: handleBlur,
     isValid,
     isDirty,
+    data: Object.keys(state).reduce((acc, fieldName) => {
+      return {
+        ...acc,
+        [fieldName]: getValue(state[fieldName].value),
+      };
+    }, {} as T),
     state,
   };
 };

src/useAjvForm.test.tsx

@@ -336,4 +336,34 @@ describe('useAJVForm', () => {
 
     expect(result.current.isValid).toBe(false);
   });
+
+  it('should correctly set data object', () => {
+    const initialData = { title: '', description: '' };
+    const schema: JSONSchemaType<{ title: string; description: string }> = {
+      type: 'object',
+      required: ['title'],
+      properties: {
+        title: { type: 'string' },
+        description: { type: 'string' },
+      },
+    };
+
+    const { result } = renderHook(() => useAJVForm(initialData, schema));
+
+    result.current.validate();
+
+    result.current.set({ title: 'Hello' });
+    result.current.onBlur('title');
+
+    expect(result.current.data).toEqual({ title: 'Hello', description: '' });
+    expect(result.current.isValid).toBe(true);
+
+    result.current.set({ title: '112' });
+    result.current.set({ description: 'John Doe' });
+    result.current.onBlur('title');
+
+    expect(result.current.data).toEqual({ title: '112', description: 'John Doe' });
+
+    expect(result.current.isValid).toBe(true);
+  });
 });

src/utils/types.ts

@@ -54,6 +54,7 @@ export type useFormErrors<T> = {
   [K in keyof T]?: string;
 };
 export interface UseFormReturn<T> {
+  data: T;
   state: IState<T>;
   set: (form: Partial<{ [K in keyof T]: T[K] }>) => void;
   reset: () => void;