Components
AbbreviateNumberActionLinkAdaptiveCardAffixAuthorityCheckCalendarViewChartConfirmDialogContainerCustomFormatInputDataTableDebounceInputDoubleSidedImageEllipsisButtonGanttChartGrowShrinkValueIconTextImageGalleryLoadingMasonryMediaSkeletonNavToggleNumericInputOtpInputPasswordInputPatternInputRegionMapRichTextEditorSegmentItemOptionStickyFooterSyntaxHighlighterUsersAvatarGroup
FormCustomFormatInput
FormCustomFormatInput wrapped Input component with react-number-format.
Simple
Basic usage of FormCustomFormatInput, all react-number-format props can be apply to this component as well.
WithForm
Example usage with React Hook Form
API
FormCustomFormatInput
| Prop | Description | Type | Default |
|---|---|---|---|
| inputPrefix | Render a prefix content inside Input | string | ReactNode | - |
| inputSuffix | Render a suffix content inside Input | string | ReactNode | - |
| format | A format function which can turn any numeric string to a formatted string. | (value: string) => string | - |
| removeFormatting | A function to removing formatting from a formatted string and return numeric string. | (value: string) => string | - |
| getCaretBoundary | A function given a formatted string, returns boundaries of valid cursor position. basically an array of boolean, where index of specify caret position. true at a index signifies user can put their caret at the position, false means the caret position is not allowed and the caret will move to closet allowed position. | (formattedValue: string) => boolean[] | - |
| isValidInputCharacter | A function to tell if a character in the formatted value is a valid typeable character. You don't need to pass it most of the time, as it defaults numeric characters (0-9). But case like additional character is allowed to type, for example decimal separator in currency format. | (character: string) => boolean | - |
Dependencies
React number format
All common React number format props can be applied on this component, refer official docs for the complete this.props.first list.