Dealing with number inputs in React can be a pain, especially when you need to make sure they're the right size or have the right number of decimal points. Simple stuff might seem easy, but once you get into the nitty-gritty and try to achieve custom user experiences, the code can get messy fast. A common approach that most of us use is to write the custom validation logic that restricts the user input in `onChange` handler. Something like this ```tsx function NumberInput({ value, onChange, min, max, }: { value: number; onChange: (val: number) => void; min?: number; max?: number; }) { const changeHandler = (e: React.ChangeEvent) => { const val = +e.target.value; if (min != null && val < min) { onChange(min); return; } if (max != null && val > max) { onChange(max); return; } onChange(val); }; return ( ); } ``` This logic looks good at a first glance but if you have tried it already you know it comes with lot of unexpected and weird behaviours and not at all a good user experience ! Another approach is to use standard HTML `` element with the inbuilt validations using attributes like `min`, `max`, `maxLength` etc. However, it lacks the instant feedback and the input restrictions that we usually want to implement. We end up Googling our way to Stack Overflow and find some... _hackish_ solutions. - Using `onKeyPress` and manually validate the input values. - Using `pattern` attribute and add Regex to validate number ( which doesn't work with the `type="number"` so we have to make it `type="text"` ). - and what not ... ![Overwhelmed gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iws91gtdu9aa7789u8z6.gif) After a lot of trial and error, I finally figured out a better way to do this. ## The Solution We can make use of inbuilt HTML input validation with some custom javascript to build a perfect solution. Here is the component ```tsx // Interface for props overriding the default value and onChange // attribute to accept only numeric value export interface NumberInputProps extends Omit, "onChange"> { onChange: (val: number) => void; value: number; } function NumberInput({ value, onChange, min, max, step, ...props }: NumberInputProps) { // Internal input state to avoid weird behaviors with empty inputs const [input, setInput] = React.useState(value?.toString() || ""); const changeHandler = (e: React.ChangeEvent) => { // Using HTML input validity API to validation if ( (max != null && e.target.validity.rangeOverflow) || (min != null && e.target.validity.rangeUnderflow) || (step != null && e.target.validity.stepMismatch) ) return; const val = +e.target.value; setInput(e.target.value); onChange(val); }; // To ensure the external updates are reflected in the input element React.useEffect(() => { setInput(value.toString()); }, [value]); return ( ); } ``` With this approach we can utilise the inbuilt HTML validations and also restrict the invalid user input for numbers. ![Solution found gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gp5cxo6cgnt328n6y5l2.gif) Check out live example and play around {% embed https://codesandbox.io/embed/ysgdnt?view=editor+%2B+preview&module=%2Fsrc%2FApp.tsx %} ## Bonus We can make this logic more reusable by extracting it out in a custom hook like this ```ts export const useNumberInput = ({ value, onChange, min, max, step, }: { value: number; onChange: (val: number) => void; max?: number; min?: number; step?: number; }): InputHTMLAttributes => { const [input, setInput] = useState(value?.toString() || ""); const changeHandler = (e: React.ChangeEvent) => { if ( (max != null && e.target.validity.rangeOverflow) || (min != null && e.target.validity.rangeUnderflow) || (step != null && e.target.validity.stepMismatch) ) return; const val = +e.target.value; setInput(e.target.value); onChange(val); }; useEffect(() => { setInput(value.toString()); }, [value]); return { type: "number", value: input, onChange: changeHandler, min, max, step, }; }; ``` And use it in any component where required ( Obviously which has an `input` element ). ```tsx export default function CustomInput() { const [value, setValue] = useState(0); const inputProps = useNumberInput({ value, onChange: setValue, min: 1, max: 50, }); return (

); } ``` Feel free to add comments and suggest improvements !

akshay_patil_131930887e40

Best way to handle number input validation in React

Join Our Newsletter. No Spam, Only the good stuff.