rfhook 1.1.2 → 1.2.0

package/.husky/commit-msg

@@ -0,0 +1 @@
+npx --no -- commitlint --edit

package/.prettierignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+*.log

package/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "arrowParens": "always",
+  "endOfLine": "auto",
+  "printWidth": 80,
+  "semi": false,
+  "singleAttributePerLine": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all"
+}

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+## 1.2.0 (2026-01-21)
+
+
+### Features
+
+* enhance useForm hook with improved type safety and additional utility functions ([73bee0e](https://github.com/evandroishikawa/rfhook/commit/73bee0ee58522deb2c21d8a25ada531c5411e339))
+* initial commit for form-hook ([67f2812](https://github.com/evandroishikawa/rfhook/commit/67f28128b51236ee24727cb1378f679ad646765e))
+* update package name to "rfhook" and add cSpell configuration ([7035768](https://github.com/evandroishikawa/rfhook/commit/7035768698e046c01248bcb93fe2f2e9909ec51f))
+* update README to clarify automatic prevention of default form submission ([4cf0cb6](https://github.com/evandroishikawa/rfhook/commit/4cf0cb657421eb65891d8108b6fab2a27f943ee5))
+
+
+### Bug Fixes
+
+* bump version to 1.0.1 in package.json ([537382c](https://github.com/evandroishikawa/rfhook/commit/537382c4a080ec9308da4b733e31cfbcc3d37d57))
+* update package name from "@eji/form-hook" to "rfhook" in README.md ([d65177a](https://github.com/evandroishikawa/rfhook/commit/d65177a3cb5fecbb4509414972f786b21fbf9b9e))

package/README.md

@@ -9,6 +9,8 @@ A lightweight React hook for handling form submissions with advanced form data p
 - :wrench: **Nested Objects** - Parse nested form data with dot notation (`user.name`)
 - :clipboard: **Array Support** - Handle arrays with indexed notation (`items[0]`)
 - :floppy_disk: **Automatic Prevention** - Prevents default form submission behavior by default
+- :seedling: **Form Initialization** - Pre-populate forms with initial data or load data dynamically
+- :arrows_counterclockwise: **Smart Reset** - Reset to initial state, custom data, or clear completely
 - :money_with_wings: **Lightweight** - Zero dependencies (except React)
 - :memo: **Framework Agnostic** - Works with any form structure
 
@@ -28,6 +30,8 @@ yarn add rfhook
 
 ## Quick Start
 
+### Basic Usage
+
 ```tsx
 import React from 'react';
 import { useForm } from 'rfhook';
@@ -52,7 +56,40 @@ function LoginForm() {
     </form>
   );
 }
-      <button type="submit">Login</button>
+```
+
+### With Initial Data
+
+```tsx
+import React, { useEffect } from 'react';
+import { useForm } from 'rfhook';
+
+function EditUserForm({ userId }) {
+  const form = useForm<FormData>({
+    submit: (data) => updateUser(userId, data),
+    initialData: { name: '', email: '', phone: '' }
+  });
+
+  // Load user data and initialize form
+  useEffect(() => {
+    const loadUser = async () => {
+      if (userId) {
+        const userData = await fetchUser(userId);
+        form.initialize(userData);
+      } else {
+        form.initialize(); // Use initialData
+      }
+    };
+
+    loadUser();
+  }, [userId]);
+
+  return (
+    <form ref={form.ref} onSubmit={form.onSubmit}>
+      <input name="name" placeholder="Name" />
+      <input name="email" type="email" placeholder="Email" />
+      <input name="phone" placeholder="Phone" />
+      <button type="submit">Save</button>
     </form>
   );
 }
@@ -155,27 +192,124 @@ function TodoForm() {
 #### Parameters
 
 - `options.submit: (data: T) => void` - Callback function called when form is submitted with parsed form data
+- `options.initialData?: T` - Optional initial data to populate the form fields
 
 #### Returns
 
 - `ref: React.RefObject<HTMLFormElement>` - React ref to attach to your form element
 - `onSubmit: (event: React.FormEvent<HTMLFormElement>) => void` - Form submission handler that prevents default behavior and calls submit with parsed data
-- `reset: () => void` - Resets the form to its initial state
+- `reset: (data?: T, shouldUseInitialData?: boolean) => void` - Resets the form. If `data` is provided, sets form to that data. If `shouldUseInitialData` is true (default), falls back to initial data when no data is provided
 - `getFormData: () => T | null` - Gets current form data without triggering submission (returns null if form ref is not available)
 - `setValue: (name: string, value: string) => void` - Sets the value of a specific form field by name
+- `initialize: (data?: T) => void` - Initializes the form with provided data or falls back to initial data from options
+
+### Form Initialization Examples
+
+#### Static Initial Data
+
+```tsx
+const form = useForm<UserData>({
+  submit: (data) => saveUser(data),
+  initialData: {
+    name: 'John Doe',
+    email: 'john@example.com',
+    role: 'user'
+  }
+});
+
+// Initialize with predefined data on component mount
+useEffect(() => {
+  form.initialize(); // Uses initialData
+}, []);
+```
+
+#### Dynamic Data Loading
+
+```tsx
+function EditProfile({ userId }) {
+  const form = useForm<ProfileData>({
+    submit: (data) => updateProfile(userId, data)
+  });
+
+  useEffect(() => {
+    const loadProfile = async () => {
+      try {
+        const profile = await fetchProfile(userId);
+        form.initialize(profile);
+      } catch (error) {
+        console.error('Failed to load profile:', error);
+        // Initialize with empty data or defaults
+        form.initialize({ name: '', email: '', bio: '' });
+      }
+    };
+
+    if (userId) loadProfile();
+  }, [userId]);
+
+  return (
+    <form ref={form.ref} onSubmit={form.onSubmit}>
+      <input name="name" placeholder="Full Name" />
+      <input name="email" type="email" placeholder="Email" />
+      <textarea name="bio" placeholder="Bio" />
+      <button type="submit">Save Profile</button>
+    </form>
+  );
+}
+```
+
+#### Conditional Reset Behavior
+
+```tsx
+function FormWithMultipleResets() {
+  const form = useForm<FormData>({
+    submit: (data) => console.log(data),
+    initialData: { name: 'Default Name', email: '' }
+  });
 
-### Additional Usage Examples
+  return (
+    <>
+      <form ref={form.ref} onSubmit={form.onSubmit}>
+        <input name="name" placeholder="Name" />
+        <input name="email" placeholder="Email" />
+        <button type="submit">Submit</button>
+      </form>
+
+      <div>
+        {/* Reset to initial data */}
+        <button onClick={() => form.reset()}>Reset to Defaults</button>
+
+        {/* Reset to custom data */}
+        <button onClick={() => form.reset({ name: 'Custom Name', email: 'custom@example.com' })}>
+          Reset to Custom
+        </button>
+
+        {/* Clear form completely */}
+        <button onClick={() => form.reset({}, false)}>Clear Form</button>
+      </div>
+    </>
+  );
+}
+```
 
 #### Using Form Utilities
 
 ```tsx
 function MyForm() {
   const form = useForm<FormData>({
-    submit: (data) => console.log('Submitted:', data)
+    submit: (data) => console.log('Submitted:', data),
+    initialData: { name: '', email: '', age: '' }
   });
 
   const handleReset = () => {
-    form.reset(); // Reset form to initial state
+    form.reset(); // Reset to initial data
+  };
+
+  const handleClearForm = () => {
+    form.reset({}, false); // Clear form completely
+  };
+
+  const handleResetToDefaults = () => {
+    form.reset({ name: 'Default User', email: '', age: '25' }); // Reset to specific data
   };
 
   const handlePreview = () => {
@@ -190,18 +324,27 @@ function MyForm() {
     form.setValue('name', 'John Doe');
   };
 
+  const handleLoadFromAPI = async () => {
+    const userData = await fetchUserData();
+    form.initialize(userData);
+  };
+
   return (
     <>
       <form ref={form.ref} onSubmit={form.onSubmit}>
         <input name="name" placeholder="Name" />
         <input name="email" type="email" placeholder="Email" />
+        <input name="age" type="number" placeholder="Age" />
         <button type="submit">Submit</button>
       </form>
 
       <div>
-        <button onClick={handleReset}>Reset Form</button>
+        <button onClick={handleReset}>Reset to Initial</button>
+        <button onClick={handleClearForm}>Clear Form</button>
+        <button onClick={handleResetToDefaults}>Reset to Defaults</button>
         <button onClick={handlePreview}>Preview Data</button>
         <button onClick={handlePrefill}>Prefill Form</button>
+        <button onClick={handleLoadFromAPI}>Load from API</button>
       </div>
     </>
   );
@@ -318,5 +461,23 @@ pnpm install
 # Build the package
 pnpm run build
 
+# Code quality
+pnpm run lint          # Check for linting issues
+pnpm run lint:fix      # Auto-fix linting issues
+pnpm run format        # Format code with Prettier
+pnpm run format:check  # Check code formatting
+
 # The built files will be in the `dist/` directory
 ```
+
+### Code Style
+
+This project uses:
+
+- **ESLint** for code linting with TypeScript and React support
+- **Prettier** for code formatting with these rules:
+  - Single quotes
+  - No semicolons
+  - Trailing commas
+  - 2-space indentation
+  - 80 character line width

package/commitlint.config.ts

@@ -0,0 +1,20 @@
+const commitTypes = [
+  'chore',
+  'fix',
+  'feat',
+  'docs',
+  'style',
+  'refactor',
+  'test',
+  'ci',
+  'build',
+  'revert',
+  'wip',
+]
+
+export default {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'type-enum': [2, 'always', commitTypes],
+  },
+}

package/dist/index.cjs

@@ -40,7 +40,9 @@ function parseFormData(formData) {
                 continue;
             }
             // Initialize nested object and move to it
-            if (!current[key] || typeof current[key] !== 'object' || Array.isArray(current[key])) {
+            if (!current[key] ||
+                typeof current[key] !== 'object' ||
+                Array.isArray(current[key])) {
                 current[key] = {};
             }
             current = current[key];
@@ -50,13 +52,14 @@ function parseFormData(formData) {
 }
 
 /**
- * A React hook for handling form state and submission
+ * A React hook for handling form state and submission with initialization support
  *
  * @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
+ * Basic usage:
  * ```typescript
  * interface LoginData {
  *   email: string;
@@ -75,9 +78,43 @@ function parseFormData(formData) {
  *   </form>
  * );
  * ```
+ *
+ * @example
+ * With initial data:
+ * ```typescript
+ * const form = useForm<LoginData>({
+ *   submit: (data) => console.log(data),
+ *   initialData: { email: 'user@example.com', password: '' }
+ * });
+ *
+ * // Initialize form with initial data on mount
+ * useEffect(() => {
+ *   form.initialize();
+ * }, []);
+ * ```
+ *
+ * @example
+ * Dynamic initialization:
+ * ```typescript
+ * const form = useForm<UserData>({
+ *   submit: (data) => saveUser(data)
+ * });
+ *
+ * // Load and set user data from API
+ * const loadUser = async (userId: string) => {
+ *   const userData = await fetchUser(userId);
+ *   form.initialize(userData);
+ * };
+ *
+ * // Reset to specific data
+ * const resetToDefaults = () => {
+ *   form.reset({ name: '', email: '', age: '' });
+ * };
+ * ```
  */
-function useForm({ submit }) {
+function useForm({ submit, initialData, }) {
     const ref = react.useRef(null);
+    const initialDataRef = react.useRef(initialData);
     const onSubmit = (event) => {
         event.preventDefault();
         if (!ref.current)
@@ -86,10 +123,16 @@ function useForm({ submit }) {
         const data = parseFormData(formData);
         submit(data);
     };
-    const reset = () => {
+    const reset = (data, shouldUseInitialData = true) => {
         if (!ref.current)
             return;
         ref.current.reset();
+        if (data) {
+            return initialize(data);
+        }
+        if (initialDataRef.current && shouldUseInitialData) {
+            initialize(initialDataRef.current);
+        }
     };
     const getFormData = () => {
         if (!ref.current)
@@ -106,12 +149,22 @@ function useForm({ submit }) {
             element.value = value;
         }
     };
+    const initialize = (data) => {
+        const dataToUse = data || initialDataRef.current;
+        if (!ref.current || !dataToUse)
+            return;
+        Object.entries(dataToUse).forEach(([key, value]) => {
+            if (value)
+                setValue(key, String(value));
+        });
+    };
     return {
         ref,
+        getFormData,
+        initialize,
         onSubmit,
         reset,
-        getFormData,
-        setValue
+        setValue,
     };
 }
 

package/dist/index.js

@@ -38,7 +38,9 @@ function parseFormData(formData) {
                 continue;
             }
             // Initialize nested object and move to it
-            if (!current[key] || typeof current[key] !== 'object' || Array.isArray(current[key])) {
+            if (!current[key] ||
+                typeof current[key] !== 'object' ||
+                Array.isArray(current[key])) {
                 current[key] = {};
             }
             current = current[key];
@@ -48,13 +50,14 @@ function parseFormData(formData) {
 }
 
 /**
- * A React hook for handling form state and submission
+ * A React hook for handling form state and submission with initialization support
  *
  * @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
+ * Basic usage:
  * ```typescript
  * interface LoginData {
  *   email: string;
@@ -73,9 +76,43 @@ function parseFormData(formData) {
  *   </form>
  * );
  * ```
+ *
+ * @example
+ * With initial data:
+ * ```typescript
+ * const form = useForm<LoginData>({
+ *   submit: (data) => console.log(data),
+ *   initialData: { email: 'user@example.com', password: '' }
+ * });
+ *
+ * // Initialize form with initial data on mount
+ * useEffect(() => {
+ *   form.initialize();
+ * }, []);
+ * ```
+ *
+ * @example
+ * Dynamic initialization:
+ * ```typescript
+ * const form = useForm<UserData>({
+ *   submit: (data) => saveUser(data)
+ * });
+ *
+ * // Load and set user data from API
+ * const loadUser = async (userId: string) => {
+ *   const userData = await fetchUser(userId);
+ *   form.initialize(userData);
+ * };
+ *
+ * // Reset to specific data
+ * const resetToDefaults = () => {
+ *   form.reset({ name: '', email: '', age: '' });
+ * };
+ * ```
  */
-function useForm({ submit }) {
+function useForm({ submit, initialData, }) {
     const ref = useRef(null);
+    const initialDataRef = useRef(initialData);
     const onSubmit = (event) => {
         event.preventDefault();
         if (!ref.current)
@@ -84,10 +121,16 @@ function useForm({ submit }) {
         const data = parseFormData(formData);
         submit(data);
     };
-    const reset = () => {
+    const reset = (data, shouldUseInitialData = true) => {
         if (!ref.current)
             return;
         ref.current.reset();
+        if (data) {
+            return initialize(data);
+        }
+        if (initialDataRef.current && shouldUseInitialData) {
+            initialize(initialDataRef.current);
+        }
     };
     const getFormData = () => {
         if (!ref.current)
@@ -104,12 +147,22 @@ function useForm({ submit }) {
             element.value = value;
         }
     };
+    const initialize = (data) => {
+        const dataToUse = data || initialDataRef.current;
+        if (!ref.current || !dataToUse)
+            return;
+        Object.entries(dataToUse).forEach(([key, value]) => {
+            if (value)
+                setValue(key, String(value));
+        });
+    };
     return {
         ref,
+        getFormData,
+        initialize,
         onSubmit,
         reset,
-        getFormData,
-        setValue
+        setValue,
     };
 }
 

package/dist/useForm.hook.d.ts

@@ -4,6 +4,8 @@
 interface UseFormOptions<T> {
     /** Callback function called when form is submitted with parsed form data */
     submit: (data: T) => void;
+    /** Initial data to populate the form fields */
+    initialData?: T;
 }
 /**
  * Return type of the useForm hook
@@ -13,21 +15,24 @@ interface UseFormReturn<T> {
     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;
+    /** Resets the form and optionally sets it to provided data or initial data */
+    reset: (data?: T, shouldUseInitialData?: boolean) => 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;
+    /** Initializes the form with provided data or initial data from options */
+    initialize: (data?: T) => void;
 }
 /**
- * A React hook for handling form state and submission
+ * A React hook for handling form state and submission with initialization support
  *
  * @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
+ * Basic usage:
  * ```typescript
  * interface LoginData {
  *   email: string;
@@ -46,6 +51,39 @@ interface UseFormReturn<T> {
  *   </form>
  * );
  * ```
+ *
+ * @example
+ * With initial data:
+ * ```typescript
+ * const form = useForm<LoginData>({
+ *   submit: (data) => console.log(data),
+ *   initialData: { email: 'user@example.com', password: '' }
+ * });
+ *
+ * // Initialize form with initial data on mount
+ * useEffect(() => {
+ *   form.initialize();
+ * }, []);
+ * ```
+ *
+ * @example
+ * Dynamic initialization:
+ * ```typescript
+ * const form = useForm<UserData>({
+ *   submit: (data) => saveUser(data)
+ * });
+ *
+ * // Load and set user data from API
+ * const loadUser = async (userId: string) => {
+ *   const userData = await fetchUser(userId);
+ *   form.initialize(userData);
+ * };
+ *
+ * // Reset to specific data
+ * const resetToDefaults = () => {
+ *   form.reset({ name: '', email: '', age: '' });
+ * };
+ * ```
  */
-export declare function useForm<T = Record<string, unknown>>({ submit }: UseFormOptions<T>): UseFormReturn<T>;
+export declare function useForm<T = Record<string, unknown>>({ submit, initialData, }: UseFormOptions<T>): UseFormReturn<T>;
 export {};

package/eslint.config.mjs

@@ -0,0 +1,50 @@
+import js from '@eslint/js'
+import tseslint from '@typescript-eslint/eslint-plugin'
+import tsparser from '@typescript-eslint/parser'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import prettier from 'eslint-plugin-prettier'
+
+export default [
+  js.configs.recommended,
+  {
+    files: ['**/*.{ts,tsx,js}'],
+    languageOptions: {
+      parser: tsparser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    plugins: {
+      '@typescript-eslint': tseslint,
+      prettier,
+      react: react,
+      'react-hooks': reactHooks,
+    },
+    rules: {
+      ...tseslint.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/react-in-jsx-scope': 'off',
+      'react/prop-types': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        { argsIgnorePattern: '^_' },
+      ],
+      'no-undef': 'off',
+      'prettier/prettier': 'error',
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+  {
+    ignores: ['dist/**', 'node_modules/**', '*.config.js'],
+  },
+]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rfhook",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -18,15 +18,32 @@
     "react-dom": "^19.2.3"
   },
   "devDependencies": {
+    "@commitlint/cli": "^20.3.1",
+    "@commitlint/config-conventional": "^20.3.1",
+    "@eslint/js": "^9.39.2",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@types/react": "^19.2.8",
+    "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.53.1",
+    "@typescript-eslint/parser": "^8.53.1",
+    "eslint": "^9.39.2",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "husky": "^9.1.7",
+    "prettier": "^3.8.0",
     "rollup": "^4.55.2",
+    "standard-version": "^9.5.0",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3"
   },
   "scripts": {
-    "build": "rollup -c"
+    "build": "rollup -c",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx}\"",
+    "release": "standard-version"
   }
 }

package/src/index.ts

@@ -1 +1 @@
-export { useForm } from './useForm.hook';
+export { useForm } from './useForm.hook'

package/src/useForm.hook.ts

@@ -1,44 +1,49 @@
-import { useRef } from 'react';
+import { useRef } from 'react'
 
-import { parseFormData } from './utils/parseFormData';
+import { parseFormData } from './utils/parseFormData'
 
 /**
  * Configuration options for the useForm hook
  */
 interface UseFormOptions<T> {
   /** Callback function called when form is submitted with parsed form data */
-  submit: (data: T) => void;
+  submit: (data: T) => void
+  /** Initial data to populate the form fields */
+  initialData?: T
 }
 
 /**
  * Form element types that can have their values set programmatically
  */
-type FormElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+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>;
+  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;
+  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
+  /** Resets the form and optionally sets it to provided data or initial data */
+  reset: (data?: T, shouldUseInitialData?: boolean) => void
   /** Gets current form data without triggering submission */
-  getFormData: () => T | null;
+  getFormData: () => T | null
   /** Sets the value of a specific form field by name */
-  setValue: (name: string, value: string) => void;
+  setValue: (name: string, value: string) => void
+  /** Initializes the form with provided data or initial data from options */
+  initialize: (data?: T) => void
 }
 
 /**
- * A React hook for handling form state and submission
+ * A React hook for handling form state and submission with initialization support
  *
  * @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
+ * Basic usage:
  * ```typescript
  * interface LoginData {
  *   email: string;
@@ -57,55 +62,111 @@ interface UseFormReturn<T> {
  *   </form>
  * );
  * ```
+ *
+ * @example
+ * With initial data:
+ * ```typescript
+ * const form = useForm<LoginData>({
+ *   submit: (data) => console.log(data),
+ *   initialData: { email: 'user@example.com', password: '' }
+ * });
+ *
+ * // Initialize form with initial data on mount
+ * useEffect(() => {
+ *   form.initialize();
+ * }, []);
+ * ```
+ *
+ * @example
+ * Dynamic initialization:
+ * ```typescript
+ * const form = useForm<UserData>({
+ *   submit: (data) => saveUser(data)
+ * });
+ *
+ * // Load and set user data from API
+ * const loadUser = async (userId: string) => {
+ *   const userData = await fetchUser(userId);
+ *   form.initialize(userData);
+ * };
+ *
+ * // Reset to specific data
+ * const resetToDefaults = () => {
+ *   form.reset({ name: '', email: '', age: '' });
+ * };
+ * ```
  */
-export function useForm<T = Record<string, unknown>>(
-  { submit }: UseFormOptions<T>
-): UseFormReturn<T> {
-  const ref = useRef<HTMLFormElement>(null);
+export function useForm<T = Record<string, unknown>>({
+  submit,
+  initialData,
+}: UseFormOptions<T>): UseFormReturn<T> {
+  const ref = useRef<HTMLFormElement>(null)
+  const initialDataRef = useRef<T | undefined>(initialData)
 
   const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-      event.preventDefault();
+    event.preventDefault()
 
-      if (!ref.current) return;
+    if (!ref.current) return
 
-      const formData = new FormData(ref.current);
+    const formData = new FormData(ref.current)
 
-      const data = parseFormData(formData) as T;
+    const data = parseFormData(formData) as T
 
-      submit(data);
-    }
+    submit(data)
+  }
+
+  const reset = (data?: T, shouldUseInitialData: boolean = true) => {
+    if (!ref.current) return
 
-  const reset = () => {
-    if (!ref.current) return;
+    ref.current.reset()
 
-    ref.current.reset();
-  };
+    if (data) {
+      return initialize(data)
+    }
+
+    if (initialDataRef.current && shouldUseInitialData) {
+      initialize(initialDataRef.current)
+    }
+  }
 
   const getFormData = (): T | null => {
-    if (!ref.current) return null;
+    if (!ref.current) return null
 
-    const formData = new FormData(ref.current);
+    const formData = new FormData(ref.current)
 
-    const data = parseFormData(formData) as T;
+    const data = parseFormData(formData) as T
 
-    return data;
-  };
+    return data
+  }
 
   const setValue = (name: string, value: string) => {
-    if (!ref.current) return;
+    if (!ref.current) return
 
-    const element = ref.current.elements.namedItem(name) as FormElement | null;
+    const element = ref.current.elements.namedItem(name) as FormElement | null
 
     if (element && 'value' in element) {
-      element.value = value;
+      element.value = value
     }
-  };
+  }
+
+  const initialize = (data?: T) => {
+    const dataToUse = data || initialDataRef.current
+
+    if (!ref.current || !dataToUse) return
+
+    Object.entries(dataToUse as Record<string, unknown>).forEach(
+      ([key, value]) => {
+        if (value) setValue(key, String(value))
+      },
+    )
+  }
 
   return {
     ref,
+    getFormData,
+    initialize,
     onSubmit,
     reset,
-    getFormData,
-    setValue
-  };
-}
+    setValue,
+  }
+}

package/src/utils/parseFormData.ts

@@ -1,60 +1,64 @@
-const ARRAY_KEY_REGEX = /^(\w+)\[(\d+)\]$/;
+const ARRAY_KEY_REGEX = /^(\w+)\[(\d+)\]$/
 
 export function parseFormData(formData: FormData): Record<string, unknown> {
-  const data = Object.fromEntries(formData.entries());
-  const result: Record<string, unknown> = {};
+  const data = Object.fromEntries(formData.entries())
+  const result: Record<string, unknown> = {}
 
   for (const [path, value] of Object.entries(data)) {
     const keys = path.split('.')
-    let current = result;
+    let current = result
 
     for (let i = 0; i < keys.length; i++) {
-      const key = keys[i];
-      const isLastKey = i === keys.length - 1;
-      const arrayMatch = key.match(ARRAY_KEY_REGEX);
+      const key = keys[i]
+      const isLastKey = i === keys.length - 1
+      const arrayMatch = key.match(ARRAY_KEY_REGEX)
 
       // Handle array notation like items[0]
       if (arrayMatch) {
-        const [, arrayKey, indexStr] = arrayMatch;
-        const index = parseInt(indexStr, 10);
+        const [, arrayKey, indexStr] = arrayMatch
+        const index = parseInt(indexStr, 10)
 
         // Initialize array if it doesn't exist
         if (!Array.isArray(current[arrayKey])) {
-          current[arrayKey] = [];
+          current[arrayKey] = []
         }
 
-        const array = current[arrayKey] as unknown[];
+        const array = current[arrayKey] as unknown[]
 
         // Set value and continue if this is the last key
         if (isLastKey) {
-          array[index] = value;
-          continue;
+          array[index] = value
+          continue
         }
 
         // Initialize nested object and move to it
         if (!array[index] || typeof array[index] !== 'object') {
-          array[index] = {};
+          array[index] = {}
         }
 
-        current = array[index] as Record<string, unknown>;
+        current = array[index] as Record<string, unknown>
 
-        continue;
+        continue
       }
 
       // Handle regular keys - set value and continue if this is the last key
       if (isLastKey) {
-        current[key] = value;
-        continue;
+        current[key] = value
+        continue
       }
 
       // Initialize nested object and move to it
-      if (!current[key] || typeof current[key] !== 'object' || Array.isArray(current[key])) {
-        current[key] = {};
+      if (
+        !current[key] ||
+        typeof current[key] !== 'object' ||
+        Array.isArray(current[key])
+      ) {
+        current[key] = {}
       }
 
-      current = current[key] as Record<string, unknown>;
+      current = current[key] as Record<string, unknown>
     }
   }
 
-  return result;
+  return result
 }

package/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES2020",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "moduleResolution": "node",
     "declaration": true,