Components
AbbreviateNumberActionLinkAdaptiveCardAffixAuthorityCheckCalendarViewChartConfirmDialogContainerCustomFormatInputDataTableDebounceInputDoubleSidedImageEllipsisButtonGanttChartGrowShrinkValueIconTextImageGalleryLoadingMasonryMediaSkeletonNavToggleNumericInputOtpInputPasswordInputPatternInputRegionMapRichTextEditorSegmentItemOptionStickyFooterSyntaxHighlighterUsersAvatarGroup
PatternInput
PatternInput wrapped Input component with react-number-format, refer to the official doc for more usage example .
Basic
Basic usage of PatternInput, all react-number-format props can be apply to this component as well.
WithForm
Example usage with React Hook Form
API
PatternInputDoc
| Prop | Description | Type | Default |
|---|---|---|---|
| inputPrefix | Render a prefix content inside Input | string | ReactNode | - |
| inputSuffix | Render a suffix content inside Input | string | ReactNode | - |
| format | It defines the format pattern using the # (or a patternChar ) character. # is the placeholder character for numbers | string | - |
| allowEmptyFormatting | By default PatternFormat component does not apply formatting when value is empty (null, undefined or ''). If you want to apply formatting on empty values set allowEmptyFormatting to true. | boolean | - |
| mask | Used as mask character for numeric places, until any numeric character is provided for that position. You can provide different mask characters for every numeric positions by passing array of mask characters. Note: The length of mask characters should match the numbers of # patternChar | string | Array | - |
| patternChar | This helps define the format pattern character | string | - |
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.