https://github.com/mzusin/mz-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.
https://github.com/mzusin/mz-react-input-number

input input-field number react react-components react-input react-input-field react-input-number react-text-input reactjs reactjs-components reactjs-library reactjs-textbox text-box-input textbox

Last synced: about 2 months ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/mzusin/mz-react-input-number
• Owner: mzusin
• License: mit
• Created: 2023-04-19T18:35:15.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-05-29T18:42:40.000Z (almost 2 years ago)
• Last Synced: 2025-01-30T01:18:20.315Z (4 months ago)
• Topics: input, input-field, number, react, react-components, react-input, react-input-field, react-input-number, react-text-input, reactjs, reactjs-components, reactjs-library, reactjs-textbox, text-box-input, textbox
• Language: TypeScript
• Homepage: https://react-input-number.mzsoft.org/
• Size: 4.82 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Input Number ✎﹏﹏﹏﹏

[![GitHub license](https://img.shields.io/github/license/mzusin/toolcool-color-picker)](https://github.com/mzusin/toolcool-color-picker/blob/main/LICENSE)

![GitHub package.json version](https://img.shields.io/github/package-json/v/mzusin/mz-react-input-number)

[![npm](https://img.shields.io/npm/dw/mz-react-input-number)](https://www.npmjs.com/package/mz-react-input-number)

[![NPM](https://img.shields.io/badge/npm-input_number-brightgreen)](https://www.npmjs.com/package/mz-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.

![React Input Number](https://github.com/mzusin/mz-react-input-number/blob/main/img/preview.gif?raw=true)

## Features

- Based on [TypeScript](https://www.typescriptlang.org/).

- 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.

![React Input Number](https://github.com/mzusin/mz-react-input-number/blob/main/img/preview-code.png?raw=true)

## Documentation 🔖

### Getting Started 

- [Basic Usage](https://react-input-number.mzsoft.org/pages/basic-usage.html)

- [Classes & Styles](https://react-input-number.mzsoft.org/pages/classes-and-styles.html)

### Callbacks 

- [onChangeCallback()](https://react-input-number.mzsoft.org/pages/onChangeCallback.html)

- [onKeyDownCallback()](https://react-input-number.mzsoft.org/pages/onKeyDownCallback.html)

- [Native Events](https://react-input-number.mzsoft.org/pages/native-events.html)

### Other 

- [Typescript Interfaces](https://react-input-number.mzsoft.org/pages/typescript-interfaces.html)

- [Decimal Places](https://react-input-number.mzsoft.org/pages/decimal-places.html)

- [Remove Regex](https://react-input-number.mzsoft.org/pages/remove-regex.html)

------------------------------

## License

[MIT license](https://github.com/mzusin/mz-react-input-number/blob/main/LICENSE)

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