@aienpah/nanoform 1.0.0 → 1.1.0

package/README.md

@@ -1 +1,5 @@
-just read me
+nanoform
+
+A lightweight React form hook focused on performance.
+
+nanoform stores field values in refs to avoid unnecessary re-renders while still supporting validation, async submissions, and form resets.

package/dist/index.cjs

@@ -29,17 +29,32 @@ module.exports = __toCommonJS(index_exports);
 // src/useForm.ts
 var import_react = require("react");
 function useForm(initialValues, validate) {
+  const lastInitialValuesRef = (0, import_react.useRef)(initialValues);
   const valuesRef = (0, import_react.useRef)({ ...initialValues });
   const formRef = (0, import_react.useRef)(null);
   const [errors, setErrors] = (0, import_react.useState)();
+  const [values, setValues] = (0, import_react.useState)(initialValues);
   const [isSubmitting, setIsSubmitting] = (0, import_react.useState)(false);
-  function handleChange(e) {
-    const { name, value } = e.target;
+  (0, import_react.useEffect)(() => {
+    const updateValues = () => {
+      lastInitialValuesRef.current = initialValues;
+      valuesRef.current = initialValues;
+      setValues(initialValues);
+    };
+    if (JSON.stringify(lastInitialValuesRef.current) !== JSON.stringify(initialValues)) {
+      updateValues();
+    }
+  }, [initialValues]);
+  function handleChange(event) {
+    const { name, value } = event.target;
+    valuesRef.current[name] = value;
+  }
+  function handleSelectOption(name, value) {
     valuesRef.current[name] = value;
   }
   function handleSubmit(onSubmit) {
-    return async (e) => {
-      e.preventDefault();
+    return async (event) => {
+      event.preventDefault();
       const currentValues = { ...valuesRef.current };
       if (validate) {
         const validateErrors = validate(currentValues);
@@ -51,7 +66,6 @@ function useForm(initialValues, validate) {
         await onSubmit(currentValues);
       } finally {
         setIsSubmitting(false);
-        reset();
       }
     };
   }
@@ -62,12 +76,14 @@ function useForm(initialValues, validate) {
     (_a = formRef.current) == null ? void 0 : _a.reset();
   }
   return {
+    values,
     formRef,
-    values: initialValues,
     errors,
     isSubmitting,
     handleChange,
-    handleSubmit
+    handleSubmit,
+    reset,
+    handleSelectOption
   };
 }
 var useForm_default = useForm;

package/dist/index.d.cts

@@ -1,14 +1,16 @@
 import * as react from 'react';
-import { ChangeEvent, FormEvent } from 'react';
+import { ChangeEvent, SubmitEvent } from 'react';
 
 type TErrors<T> = Partial<Record<keyof T, string>>;
 declare function useForm<T extends Record<string, string>>(initialValues: T, validate?: (values: T) => TErrors<T>): {
-    formRef: react.RefObject<HTMLFormElement | null>;
     values: T;
+    formRef: react.RefObject<HTMLFormElement | null>;
     errors: Partial<Record<keyof T, string>> | undefined;
     isSubmitting: boolean;
-    handleChange: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    handleSubmit: (onSubmit: (values: T) => Promise<void> | void) => (e: FormEvent) => Promise<void>;
+    handleChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handleSubmit: (onSubmit: (values: T) => Promise<void> | void) => (event: SubmitEvent) => Promise<void>;
+    reset: () => void;
+    handleSelectOption: (name: string, value: string) => void;
 };
 
 type TValidationRule = (val: string) => string | null;

package/dist/index.d.ts

@@ -1,14 +1,16 @@
 import * as react from 'react';
-import { ChangeEvent, FormEvent } from 'react';
+import { ChangeEvent, SubmitEvent } from 'react';
 
 type TErrors<T> = Partial<Record<keyof T, string>>;
 declare function useForm<T extends Record<string, string>>(initialValues: T, validate?: (values: T) => TErrors<T>): {
-    formRef: react.RefObject<HTMLFormElement | null>;
     values: T;
+    formRef: react.RefObject<HTMLFormElement | null>;
     errors: Partial<Record<keyof T, string>> | undefined;
     isSubmitting: boolean;
-    handleChange: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    handleSubmit: (onSubmit: (values: T) => Promise<void> | void) => (e: FormEvent) => Promise<void>;
+    handleChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handleSubmit: (onSubmit: (values: T) => Promise<void> | void) => (event: SubmitEvent) => Promise<void>;
+    reset: () => void;
+    handleSelectOption: (name: string, value: string) => void;
 };
 
 type TValidationRule = (val: string) => string | null;

package/dist/index.js

@@ -1,17 +1,32 @@
 // src/useForm.ts
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 function useForm(initialValues, validate) {
+  const lastInitialValuesRef = useRef(initialValues);
   const valuesRef = useRef({ ...initialValues });
   const formRef = useRef(null);
   const [errors, setErrors] = useState();
+  const [values, setValues] = useState(initialValues);
   const [isSubmitting, setIsSubmitting] = useState(false);
-  function handleChange(e) {
-    const { name, value } = e.target;
+  useEffect(() => {
+    const updateValues = () => {
+      lastInitialValuesRef.current = initialValues;
+      valuesRef.current = initialValues;
+      setValues(initialValues);
+    };
+    if (JSON.stringify(lastInitialValuesRef.current) !== JSON.stringify(initialValues)) {
+      updateValues();
+    }
+  }, [initialValues]);
+  function handleChange(event) {
+    const { name, value } = event.target;
+    valuesRef.current[name] = value;
+  }
+  function handleSelectOption(name, value) {
     valuesRef.current[name] = value;
   }
   function handleSubmit(onSubmit) {
-    return async (e) => {
-      e.preventDefault();
+    return async (event) => {
+      event.preventDefault();
       const currentValues = { ...valuesRef.current };
       if (validate) {
         const validateErrors = validate(currentValues);
@@ -23,7 +38,6 @@ function useForm(initialValues, validate) {
         await onSubmit(currentValues);
       } finally {
         setIsSubmitting(false);
-        reset();
       }
     };
   }
@@ -34,12 +48,14 @@ function useForm(initialValues, validate) {
     (_a = formRef.current) == null ? void 0 : _a.reset();
   }
   return {
+    values,
     formRef,
-    values: initialValues,
     errors,
     isSubmitting,
     handleChange,
-    handleSubmit
+    handleSubmit,
+    reset,
+    handleSelectOption
   };
 }
 var useForm_default = useForm;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@aienpah/nanoform",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "vitest",
     "build": "tsup src/index.ts --dts --format esm,cjs"
   },
   "files": [
@@ -21,8 +21,12 @@
     "react": ">=18"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",
+    "jsdom": "^29.1.1",
     "tsup": "^8.5.1",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.8"
   }
-}
+}