useInput

A hook that manages input field state and change handling. Perfect for creating controlled form inputs with minimal boilerplate and type safety.

Parameters

• initialValue: T - Initial value for the input (generic type)

Returns

• inputValue: T - Current input value
• onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void - Change event handler

Usage

import { useInput } from '@rhinolabs/react-hooks';

function FormField() {
  const { inputValue, onInputChange } = useInput<string>('');

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={onInputChange}
        placeholder="Enter text..."
      />

      <p>Current value: {inputValue}</p>
    </div>
  );
}

Type-Safe Example

interface User {
  name: string;
  age: number;
}

function UserForm() {
  const nameInput = useInput<string>('');
  const ageInput = useInput<number>(0);

  const handleSubmit = () => {
    const user: User = {
      name: nameInput.inputValue,
      age: ageInput.inputValue
    };
    // Process user data...
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={nameInput.inputValue}
        onChange={nameInput.onInputChange}
      />
      <input
        type="number"
        value={ageInput.inputValue}
        onChange={ageInput.onInputChange}
      />
    </form>
  );
}

Notes

• Implements controlled input pattern with generic type support
• Provides type-safe value and event handling
• Manages input state with automatic event processing
• Integrates seamlessly with React form components
• Handles React event types with proper TypeScript definitions