@teonord/useform

A standalone React hook similar to Inertia's useForm, supporting both TypeScript and JavaScript implementations.

Features

• 🚀 Simple and intuitive API
• 📦 Standalone (no Inertia.js dependency)
• 🔷 Full TypeScript support with type definitions
• 📝 Automatic FormData handling for file uploads
• ⚡ Built-in error handling
• 🎯 Supports all HTTP methods (GET, POST, PUT, PATCH, DELETE)

Installation

npm install @teonord/useform

or

yarn add @teonord/useform

or

pnpm add @teonord/useform

Usage

JavaScript

import useForm from '@teonord/useform'

function MyComponent() {
  const { data, setData, errors, processing, post, reset } = useForm({
    name: '',
    email: '',
  })

  const handleSubmit = (e) => {
    e.preventDefault()
    post('/api/users', {
      onSuccess: (response) => {
        console.log('Success!', response)
        reset()
      },
      onError: (error) => {
        console.error('Error:', error)
      },
    })
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={data.name}
        onChange={(e) => setData('name', e.target.value)}
      />
      {errors.name && <span>{errors.name}</span>}

      <input
        type="email"
        value={data.email}
        onChange={(e) => setData('email', e.target.value)}
      />
      {errors.email && <span>{errors.email}</span>}

      <button type="submit" disabled={processing}>
        {processing ? 'Submitting...' : 'Submit'}
      </button>
    </form>
  )
}

TypeScript

import useForm from '@teonord/useform'
import type { UseFormReturn } from '@teonord/useform'

interface FormData {
  name: string
  email: string
  age?: number
}

function MyComponent() {
  const { data, setData, errors, processing, post, reset }: UseFormReturn<FormData> = 
    useForm<FormData>({
      name: '',
      email: '',
    })

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    post('/api/users', {
      onSuccess: (response) => {
        console.log('Success!', response)
        reset()
      },
      onError: (error) => {
        console.error('Error:', error)
      },
    })
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={data.name}
        onChange={(e) => setData('name', e.target.value)}
      />
      {errors.name && <span>{errors.name}</span>}

      <input
        type="email"
        value={data.email}
        onChange={(e) => setData('email', e.target.value)}
      />
      {errors.email && <span>{errors.email}</span>}

      <button type="submit" disabled={processing}>
        {processing ? 'Submitting...' : 'Submit'}
      </button>
    </form>
  )
}

API

useForm<T>(initialData?: T)

Returns an object with the following properties and methods:

Properties

• data: T - The current form data
• errors: Record<string, string | string[]> - Validation errors from the server
• processing: boolean - Whether a request is currently in progress
• wasSuccessful: boolean - Whether the last request was successful

Methods

• setData(key: keyof T, value: any) - Update a specific field in the form data
• reset(...fields: (keyof T)[]) - Reset the form. If no fields are provided, resets all fields to initial values
• post(url: string, options?: UseFormOptions<T>) - Submit a POST request
• get(url: string, options?: UseFormOptions<T>) - Submit a GET request
• put(url: string, options?: UseFormOptions<T>) - Submit a PUT request
• patch(url: string, options?: UseFormOptions<T>) - Submit a PATCH request
• delete(url: string, options?: UseFormOptions<T>) - Submit a DELETE request

UseFormOptions<T>

Options object for HTTP methods:

interface UseFormOptions<T> {
  onSuccess?: (response: any) => void
  onError?: (error: any) => void
  headers?: Record<string, string>
}

File Uploads

The hook automatically detects file uploads and uses FormData:

const { data, setData, post } = useForm({
  name: '',
  avatar: null,
})

// Set a file
setData('avatar', e.target.files[0])

// Or multiple files
setData('avatar', e.target.files)

// Submit - automatically uses FormData
post('/api/upload', {
  onSuccess: (response) => {
    console.log('File uploaded!', response)
  },
})

License

MIT