DecimalInput • react component - input field with 0.000 precision

controlled.jsx

import React, { useState } from 'react';

const DecimalInput = () => {
    const [value, setValue] = useState('');

    const handleInputChange = (event) => {
        const newValue = event.target.value;
        
        // If the new value is empty, or it matches the decimal pattern, update the value.
        if (newValue === '' || /^-?\d*[.,]?\d{0,3}$/.test(newValue)) {
            setValue(newValue);
        }
    };

    const handleBlur = () => {
        const floatValue = parseFloat(value);

        // If the value is a valid number, format it with three decimal places.
        if (!isNaN(floatValue)) {
            setValue(floatValue.toFixed(3));
        }
    };

    return (
        <input
            type="text"
            inputMode="decimal"
            value={value}
            onChange={handleInputChange}
            onBlur={handleBlur}
        />
    );
};

export default DecimalInput;

uncontrolled-no-regex.jsx

import React, { useRef } from 'react';

const useUncontrolledInput = (initialValue, handleInputChange, handleBlur) => {
    const inputRef = useRef(initialValue);

    const setRefValue = event => {
        inputRef.current = event.target.value;
        handleInputChange(event);
    };

    const setBlurredValue = event => {
        handleBlur(event);
        inputRef.current = event.target.value;
    };

    return { value: inputRef.current, onChange: setRefValue, onBlur: setBlurredValue };
};

const DecimalInput = () => {
    const handleInputChange = (event) => {
        const newValue = event.target.value;

        if (newValue === '' || isNumeric(newValue) && countDecimalPlaces(newValue) <= 3) {
            event.target.value = newValue;
        }
    };

    const handleBlur = (event) => {
        const floatValue = parseFloat(event.target.value);

        if (!isNaN(floatValue)) {
            event.target.value = floatValue.toFixed(3);
        }
    };

    const isNumeric = (value) => !isNaN(value);

    const countDecimalPlaces = (value) => {
        const decimalParts = value.split(".");
        return decimalParts.length === 2 ? decimalParts[1].length : 0;
    };

    const props = useUncontrolledInput('', handleInputChange, handleBlur);

    return <input type="text" inputMode="decimal" {...props} />;
};

export default DecimalInput;

uncontrolled-with-regex.jsx

import React, { useRef } from 'react';

const useUncontrolledInput = (initialValue, handleInputChange, handleBlur) => {
    const inputRef = useRef(initialValue);
    
    const setRefValue = event => {
        inputRef.current = event.target.value;
        handleInputChange(event);
    };

    const setBlurredValue = event => {
        handleBlur(event);
        inputRef.current = event.target.value;
    };

    return { value: inputRef.current, onChange: setRefValue, onBlur: setBlurredValue };
};

const DecimalInput = () => {
    const handleInputChange = (event) => {
        const newValue = event.target.value;
        
        if (newValue === '' || /^-?\d*[.,]?\d{0,3}$/.test(newValue)) {
            event.target.value = newValue;
        }
    };

    const handleBlur = (event) => {
        const floatValue = parseFloat(event.target.value);
        
        if (!isNaN(floatValue)) {
            event.target.value = floatValue.toFixed(3);
        }
    };
    
    const props = useUncontrolledInput('', handleInputChange, handleBlur);

    return <input type="text" inputMode="decimal" {...props} />;
};

export default DecimalInput;