Components
AbbreviateNumberActionLinkAdaptiveCardAffixAuthorityCheckCalendarViewChartConfirmDialogContainerCustomFormatInputDataTableDebounceInputDoubleSidedImageEllipsisButtonGanttChartGrowShrinkValueIconTextImageGalleryLoadingMasonryMediaSkeletonNavToggleNumericInputOtpInputPasswordInputPatternInputRegionMapRichTextEditorSegmentItemOptionStickyFooterSyntaxHighlighterUsersAvatarGroup
DebounceInput
DebounceInput is a omponent that wraps an input field with debounce functionality. This means that the input value will only be processed after a specified delay, reducing the frequency of expensive operations like API calls or state updates while typing.
Example
Example usage
API
Container
| Prop | Description | Type | Default |
|---|---|---|---|
| wait | Time interval that will wait before invoking the onChange event after the user stops typing. | number | 500 |
| disabled | Whether the Input is disabled | boolean | - |
| invalid | Whether the Input is invalid status | boolean | - |
| onBlur | Callback when Input remove focus | (e: MouseEvent) => void | - |
| onChange | Callback when Input value changed | (e: MouseEvent) => void | - |
| onFocus | Callback when Input is focused | (e: MouseEvent) => void | - |
| prefix | Render a prefix content inside Input | string | ReactNode | - |
| size | Input size | 'lg' | 'md' | 'sm' | 'md' |
| suffix | Render a suffix content inside Input | string | ReactNode | - |
| textArea | Whether to turn Input into textarea field | boolean | - |
| type | Input type, refer to MDN for available types | string | 'text' |
| unstyle | Whether to remove input default style | boolean | false |