s-yadav/react-number-format
React Number Format
This library provides a set of tools for formatting numeric values and masking user input within React components. It includes a customizable text input wrapper that synchronizes raw numeric values with formatted display strings and a specialized input masking component for enforcing string patterns and templates during data entry.
The project features a localized number formatter that utilizes browser localization APIs to apply regional grouping, prefixes, and suffixes. It supports specialized financial formatting, such as displaying negative values in parentheses, and provides the ability to render formatted numeric values as static text rather than editable inputs.
The toolset covers input pattern constraints, custom value validation to block invalid characters, and the ability to integrate formatting logic with third-party components. It also manages value capture by distinguishing between user-initiated interactions and programmatic state updates.
Features
- Formatted Input Fields - Provides UI components that enforce specific numeric data formats via masks and pattern constraints.
- Numeric Inputs - A comprehensive library for formatting numeric values and masking user input within React components.
- Regional Number Formatting - Utilizes native browser APIs to localize number formatting based on regional and language standards.
- Logic-Rendering Decouplers - Implements architectural patterns that decouple numeric formatting logic from its visual representation.
- Formatted Input Wrappers - Provides a component wrapper that synchronizes raw numeric values with formatted display strings.
- Input Masking Patterns - Uses template placeholders to constrain user input and automatically position delimiters.
- Value Synchronization - Maintains real-time synchronization between raw numeric values and their formatted display strings.
- Input Value Extractors - Extracts raw numeric values, float representations, and formatted strings directly from UI input fields.
- Localised Number Displays - Uses browser localization APIs to format numeric values according to regional language and currency standards.
- Masked Inputs - Enforces specific character patterns and templates during user entry to ensure data matches a predefined format.
- Numeric Localization Utilities - Applies regional grouping, prefixes, and suffixes to numbers using browser localization APIs.
- Numeric Formatting - Applies thousands separators, prefixes, and suffixes to numeric inputs using locale-specific conventions.
- Template-Based Formatting - Transforms raw numeric strings into formatted versions based on predefined templates for consistent display.
- Input Reference Observers - Connects formatting logic to external input components by passing a reference to a custom element.
- Financial Notation - Implements specialized financial formatting, including the use of parentheses to represent negative values.
- Input Value Guards - Verifies input values against custom logic in real time to block invalid characters before they are committed.
- Input Event Source Tracking - Distinguishes between keyboard events and state updates to prevent recursive formatting loops.
- Custom Element Renderers - Provides mechanisms to replace default rendering functions for input containers with custom components.
- Formatting Wrappers - Allows wrapping formatting logic around third-party components to maintain consistent numeric patterns.
- Financial Input Formatting - Handles specialized requirements like parentheses for negative values and precise decimal control.
- Custom Input Overrides - Allows replacing default form input components with specialized custom implementations for formatted display.
- Input Value Guards - Intercepts value changes via custom predicates to block updates that violate numeric rules.
- Real-Time Input Validation - Verifies user input against custom logic in real time to block invalid characters.
- Static Value Rendering - Allows formatted numeric values to be displayed as static text within custom elements instead of editable inputs.
- DOM References - Uses DOM references to connect formatting logic to external custom input elements.
- Logic Compositors - Combines formatting hooks with base components to create specialized input fields.
