mz-react-input-number

React Input Number ✎﹏﹏﹏﹏

This library is a React component that provides a user-friendly interface for entering numerical values. It accepts various props that can be used to customize its behavior and appearance.

Features

• Based on TypeScript.
• It allows setting minimum and maximum values for numeric inputs, as well as the increment or decrement value for numeric inputs with a step value.
• It allows configuring the number of decimal places to be displayed for numeric inputs, such as currency or percentage fields.
• It supports arrow up, arrow down, enter, escape events. Arrow up and down events can be used to increment or decrement the numeric value, enter can be used to validate the input, and escape can be used to cancel the input.
• Mousewheel support: It allows using the mouse wheel to increment or decrement the numeric value.
• It supports Home, End, PageUp, and PageDown events. Home and PageUp allows jumping to the start of the input field, while End and PageDown allows jumping to the end of the input field.
• It allows customizing the appearance of the input field by passing custom CSS classes and styles.
• It allows using all standard HTML input attributes like disabled, autocomplete, etc., to customize the behavior of the input field.
• Remove regex
• Optionally, it allows removing non-numeric characters from the input field using regular expressions, ensuring that the input only contains valid numeric characters.

Documentation 🔖

Getting Started

• Basic Usage
• Classes & Styles

Callbacks

• onChangeCallback()
• onKeyDownCallback()
• Native Events

Other

• Typescript Interfaces
• Decimal Places
• Remove Regex

License

MIT license

It can be used for free in any personal or commercial project :gift: