useInputState

import { useInputState } from '@kuzenbo/hooks';

function useInputState<T>(
  initialState: T
): UseInputStateReturnValue<T>;

import { useInputState } from '@kuzenbo/hooks';

function TextInput() {
  const [value, setValue] = useInputState('');

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={setValue}
        placeholder="Enter text"
      />
      <p>Value: {value}</p>
    </div>
  );
}

import { useInputState } from '@kuzenbo/hooks';

function TextArea() {
  const [comment, setComment] = useInputState('');

  return (
    <div>
      <textarea
        value={comment}
        onChange={setComment}
        rows={4}
        placeholder="Enter your comment"
      />
      <p>Characters: {comment.length}</p>
    </div>
  );
}

import { useInputState } from '@kuzenbo/hooks';

function SelectInput() {
  const [country, setCountry] = useInputState('usa');

  return (
    <div>
      <select value={country} onChange={setCountry}>
        <option value="usa">United States</option>
        <option value="canada">Canada</option>
        <option value="mexico">Mexico</option>
      </select>
      <p>Selected: {country}</p>
    </div>
  );
}

import { useInputState } from '@kuzenbo/hooks';

function CheckboxInput() {
  const [checked, setChecked] = useInputState(false);

  return (
    <label>
      <input
        type="checkbox"
        checked={checked}
        onChange={setChecked}
      />
      {checked ? 'Checked' : 'Unchecked'}
    </label>
  );
}

import { useInputState } from '@kuzenbo/hooks';

function DirectValueInput() {
  const [value, setValue] = useInputState('initial');

  return (
    <div>
      <input type="text" value={value} onChange={setValue} />
      <button onClick={() => setValue('reset')}>Reset</button>
      <button onClick={() => setValue((current) => current.toUpperCase())}>
        Uppercase
      </button>
    </div>
  );
}

import { useInputState } from '@kuzenbo/hooks';

function ContactForm() {
  const [name, setName] = useInputState('');
  const [email, setEmail] = useInputState('');
  const [subscribe, setSubscribe] = useInputState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log({ name, email, subscribe });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={setName}
        placeholder="Name"
      />
      <input
        type="email"
        value={email}
        onChange={setEmail}
        placeholder="Email"
      />
      <label>
        <input
          type="checkbox"
          checked={subscribe}
          onChange={setSubscribe}
        />
        Subscribe to newsletter
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

type InputValue<T> = T;
type InputChangeEvent = ChangeEvent<
  HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
>;
type InputOnChange<T> = InputValue<T> | InputChangeEvent | ((current: T) => T);

export type UseInputStateReturnValue<T> = [
  T,
  (value: InputOnChange<T>) => void,
];