A React hook for creating mobile-friendly, auto-formatted money inputs.

useMoneyInput.ts

import { KeyboardEvent, useState } from 'react';

interface MoneyInputReturn {
    cents: number;
    setCents: (newCents: number) => void;
    stringValue: string;
    handleKeyUp: (event: KeyboardEvent<HTMLInputElement>) => void;
}

/**
 * A React hook to implement a formatted currency input.
 */
export function useMoneyInput({ max = Infinity } = {}): MoneyInputReturn {
    const [cents, setCents] = useState(0);

    function handleKeyUp(event: KeyboardEvent<HTMLInputElement>) {
        if (['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(event.key)) {
            const amount = Number(event.key);

            setCents((previous) => {
                const newAmount = previous * 10 + amount;

                if (newAmount < max * 100) {
                    return newAmount;
                }
                return previous;
            });
        } else if (event.key === 'Backspace') {
            setCents((previous) => Math.floor(previous / 10));
        }
    }

    const stringValue = (cents / 100).toLocaleString(navigator.languages[0], {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
    });

    return {
        cents,
        setCents,
        stringValue,
        handleKeyUp,
    };
}