rfhook 1.0.1 → 1.1.0

package/README.md

@@ -8,7 +8,8 @@ A lightweight React hook for handling form submissions with advanced form data p
 - 🎯 **TypeScript Support** - Fully typed with generic support
 - 🔧 **Nested Objects** - Parse nested form data with dot notation (`user.name`)
 - 📋 **Array Support** - Handle arrays with indexed notation (`items[0]`)
-- 📦 **Lightweight** - Zero dependencies (except React)
+- �️ **Automatic Prevention** - Prevents default form submission behavior by default
+- �📦 **Lightweight** - Zero dependencies (except React)
 - 🎨 **Framework Agnostic** - Works with any form structure
 
 ## Installation

package/dist/index.cjs

@@ -49,17 +49,70 @@ function parseFormData(formData) {
     return result;
 }
 
-function useForm({ handleSubmit }) {
+/**
+ * A React hook for handling form state and submission
+ *
+ * @template T - The expected shape of the parsed form data
+ * @param options - Configuration options for the form
+ * @returns Object containing form ref, handlers, and utility functions
+ *
+ * @example
+ * ```typescript
+ * interface LoginData {
+ *   email: string;
+ *   password: string;
+ * }
+ *
+ * const form = useForm<LoginData>({
+ *   submit: (data) => console.log(data.email, data.password)
+ * });
+ *
+ * return (
+ *   <form ref={form.ref} onSubmit={form.onSubmit}>
+ *     <input name="email" type="email" />
+ *     <input name="password" type="password" />
+ *     <button type="submit">Login</button>
+ *   </form>
+ * );
+ * ```
+ */
+function useForm({ submit }) {
     const ref = react.useRef(null);
-    const submit = (event) => {
+    const onSubmit = (event) => {
         event.preventDefault();
         if (!ref.current)
             return;
         const formData = new FormData(ref.current);
         const data = parseFormData(formData);
-        handleSubmit(data);
+        submit(data);
+    };
+    const reset = () => {
+        if (!ref.current)
+            return;
+        ref.current.reset();
+    };
+    const getFormData = () => {
+        if (!ref.current)
+            return null;
+        const formData = new FormData(ref.current);
+        const data = parseFormData(formData);
+        return data;
+    };
+    const setValue = (name, value) => {
+        if (!ref.current)
+            return;
+        const element = ref.current.elements.namedItem(name);
+        if (element && 'value' in element) {
+            element.value = value;
+        }
+    };
+    return {
+        ref,
+        onSubmit,
+        reset,
+        getFormData,
+        setValue
     };
-    return { ref, submit };
 }
 
 exports.useForm = useForm;

package/dist/index.js

@@ -47,17 +47,70 @@ function parseFormData(formData) {
     return result;
 }
 
-function useForm({ handleSubmit }) {
+/**
+ * A React hook for handling form state and submission
+ *
+ * @template T - The expected shape of the parsed form data
+ * @param options - Configuration options for the form
+ * @returns Object containing form ref, handlers, and utility functions
+ *
+ * @example
+ * ```typescript
+ * interface LoginData {
+ *   email: string;
+ *   password: string;
+ * }
+ *
+ * const form = useForm<LoginData>({
+ *   submit: (data) => console.log(data.email, data.password)
+ * });
+ *
+ * return (
+ *   <form ref={form.ref} onSubmit={form.onSubmit}>
+ *     <input name="email" type="email" />
+ *     <input name="password" type="password" />
+ *     <button type="submit">Login</button>
+ *   </form>
+ * );
+ * ```
+ */
+function useForm({ submit }) {
     const ref = useRef(null);
-    const submit = (event) => {
+    const onSubmit = (event) => {
         event.preventDefault();
         if (!ref.current)
             return;
         const formData = new FormData(ref.current);
         const data = parseFormData(formData);
-        handleSubmit(data);
+        submit(data);
+    };
+    const reset = () => {
+        if (!ref.current)
+            return;
+        ref.current.reset();
+    };
+    const getFormData = () => {
+        if (!ref.current)
+            return null;
+        const formData = new FormData(ref.current);
+        const data = parseFormData(formData);
+        return data;
+    };
+    const setValue = (name, value) => {
+        if (!ref.current)
+            return;
+        const element = ref.current.elements.namedItem(name);
+        if (element && 'value' in element) {
+            element.value = value;
+        }
+    };
+    return {
+        ref,
+        onSubmit,
+        reset,
+        getFormData,
+        setValue
     };
-    return { ref, submit };
 }
 
 export { useForm };

package/dist/useForm.hook.d.ts

@@ -1,8 +1,51 @@
-interface UseForm<T> {
-    handleSubmit: (data: T) => void;
+/**
+ * Configuration options for the useForm hook
+ */
+interface UseFormOptions<T> {
+    /** Callback function called when form is submitted with parsed form data */
+    submit: (data: T) => void;
 }
-export declare function useForm<T = object>({ handleSubmit }: UseForm<T>): {
-    ref: import("react").RefObject<HTMLFormElement | null>;
-    submit: (event: React.FormEvent) => void;
-};
+/**
+ * Return type of the useForm hook
+ */
+interface UseFormReturn<T> {
+    /** React ref to be attached to the form element */
+    ref: React.RefObject<HTMLFormElement | null>;
+    /** Form submission handler - prevents default and calls submit with parsed data */
+    onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+    /** Resets the form to its initial state */
+    reset: () => void;
+    /** Gets current form data without triggering submission */
+    getFormData: () => T | null;
+    /** Sets the value of a specific form field by name */
+    setValue: (name: string, value: string) => void;
+}
+/**
+ * A React hook for handling form state and submission
+ *
+ * @template T - The expected shape of the parsed form data
+ * @param options - Configuration options for the form
+ * @returns Object containing form ref, handlers, and utility functions
+ *
+ * @example
+ * ```typescript
+ * interface LoginData {
+ *   email: string;
+ *   password: string;
+ * }
+ *
+ * const form = useForm<LoginData>({
+ *   submit: (data) => console.log(data.email, data.password)
+ * });
+ *
+ * return (
+ *   <form ref={form.ref} onSubmit={form.onSubmit}>
+ *     <input name="email" type="email" />
+ *     <input name="password" type="password" />
+ *     <button type="submit">Login</button>
+ *   </form>
+ * );
+ * ```
+ */
+export declare function useForm<T = Record<string, unknown>>({ submit }: UseFormOptions<T>): UseFormReturn<T>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rfhook",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "",
   "main": "dist/index.cjs",
   "module": "dist/index.js",

package/src/useForm.hook.ts

@@ -2,24 +2,110 @@ import { useRef } from 'react';
 
 import { parseFormData } from './utils/parseFormData';
 
-interface UseForm<T> {
-  handleSubmit: (data: T) => void;
+/**
+ * Configuration options for the useForm hook
+ */
+interface UseFormOptions<T> {
+  /** Callback function called when form is submitted with parsed form data */
+  submit: (data: T) => void;
 }
 
-export function useForm<T = object>({ handleSubmit }: UseForm<T>) {
+/**
+ * Form element types that can have their values set programmatically
+ */
+type FormElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+
+/**
+ * Return type of the useForm hook
+ */
+interface UseFormReturn<T> {
+  /** React ref to be attached to the form element */
+  ref: React.RefObject<HTMLFormElement | null>;
+  /** Form submission handler - prevents default and calls submit with parsed data */
+  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+  /** Resets the form to its initial state */
+  reset: () => void;
+  /** Gets current form data without triggering submission */
+  getFormData: () => T | null;
+  /** Sets the value of a specific form field by name */
+  setValue: (name: string, value: string) => void;
+}
+
+/**
+ * A React hook for handling form state and submission
+ *
+ * @template T - The expected shape of the parsed form data
+ * @param options - Configuration options for the form
+ * @returns Object containing form ref, handlers, and utility functions
+ *
+ * @example
+ * ```typescript
+ * interface LoginData {
+ *   email: string;
+ *   password: string;
+ * }
+ *
+ * const form = useForm<LoginData>({
+ *   submit: (data) => console.log(data.email, data.password)
+ * });
+ *
+ * return (
+ *   <form ref={form.ref} onSubmit={form.onSubmit}>
+ *     <input name="email" type="email" />
+ *     <input name="password" type="password" />
+ *     <button type="submit">Login</button>
+ *   </form>
+ * );
+ * ```
+ */
+export function useForm<T = Record<string, unknown>>(
+  { submit }: UseFormOptions<T>
+): UseFormReturn<T> {
   const ref = useRef<HTMLFormElement>(null);
 
-  const submit = (event: React.FormEvent) => {
+  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
       event.preventDefault();
 
-      if (!ref.current) return
+      if (!ref.current) return;
 
       const formData = new FormData(ref.current);
 
-      const data: object = parseFormData(formData);
+      const data = parseFormData(formData) as T;
+
+      submit(data);
+    }
+
+  const reset = () => {
+    if (!ref.current) return;
+
+    ref.current.reset();
+  };
+
+  const getFormData = (): T | null => {
+    if (!ref.current) return null;
+
+    const formData = new FormData(ref.current);
+
+    const data = parseFormData(formData) as T;
+
+    return data;
+  };
+
+  const setValue = (name: string, value: string) => {
+    if (!ref.current) return;
+
+    const element = ref.current.elements.namedItem(name) as FormElement | null;
 
-      handleSubmit(data as T);
+    if (element && 'value' in element) {
+      element.value = value;
     }
+  };
 
-  return { ref, submit };
+  return {
+    ref,
+    onSubmit,
+    reset,
+    getFormData,
+    setValue
+  };
 }