SearchInput
A Search component with debouncing support, internally it extends the TextInput and it's all props.
Usage
Search user
function SearchInputUsage() {
return (
<View>
<SearchInput
label="Search user"
placeholder="eg. Blossom"
size="medium"
/>
</View>
)
}
AnimatedSearchInput
Search Label
Search Placeholder
function AnimatedSearchInput() {
const placeholders = [
`Search 'Awesome'`,
`Search 'Blossom'`,
`Search 'Rose'`,
`Search 'Daisy'`,
`Search 'Tulip'`,
`Search 'Orchid'`,
]
return (
<View>
<SearchInput
label="Search Label"
size="medium"
animatedPlaceholderProps={{
placeholders,
}}
left={<Icon name="search" size={24} />}
/>
<SearchInput
label="Search Placeholder"
mode="flat"
animatedPlaceholderProps={{
placeholders,
}}
/>
</View>
)
}
Modes
Search user
Search user
function SearchInputModes() {
return (
<View>
<SearchInput label="Search user" placeholder="eg. Blossom" mode="flat" />
<SearchInput
label="Search user"
placeholder="eg. Blossom"
size="medium"
mode="outlined"
/>
</View>
)
}
Size
Search user
Search user
Search user
Search user
Search user
Search user
function SearchInputSizes() {
return (
<View>
<SearchInput label="Search user" placeholder="eg. Blossom" size="small" />
<SearchInput
label="Search user"
placeholder="eg. Blossom"
size="medium"
/>
<SearchInput label="Search user" placeholder="eg. Blossom" size="large" />
<SearchInput
mode="flat"
label="Search user"
placeholder="eg. Blossom"
size="small"
/>
<SearchInput
mode="flat"
label="Search user"
placeholder="eg. Blossom"
size="medium"
/>
<SearchInput
mode="flat"
label="Search user"
placeholder="eg. Blossom"
size="large"
/>
</View>
)
}
Props
| Prop | Data Type | Default Value | Description |
|---|---|---|---|
| Extends | TextInputProps | -- | Inherits properties from TextInputProps |
| withClearIcon | boolean | false | Whether to show a clear (X) icon to reset the input at the right.Set it to true to show the clear icon. |
| onQueryChange | (query: string) => void | -- | Callback when the search query changes. |
| debounceDelay | number | 300 | Delay in milliseconds to debounce the query change callback. |
| animatedPlaceholderProps | AnimatedPlaceholderProps | -- | Customize the animated placeholder behavior with a slide-up animation. |
| mode | "outlined" | "flat" | outlined | Control the different modes of the text input |
| dense | boolean | -- | Have a denser background in the text input |
| label | string | -- | Label text above the input |
| placeholder | string | -- | Placeholder for the text input |
| placeholderComponent | ReactNode | -- | Render a custom Placeholder component for the text input |
| caption | string | -- | Caption text below the text input |
| error | string | -- | Error text in error status below caption text |
| labelStyle | StyleProp<TextStyle> | -- | Label text style |
| placeholderStyle | StyleProp<TextStyle> | -- | Placeholder text style |
| captionStyle | StyleProp<TextStyle> | -- | Caption text style |
| errorStyle | StyleProp<TextStyle> | -- | Error text style |
| containerStyle | StyleProp<ViewStyle> | -- | Container view style |
| inputStyle | StyleProp<ViewStyle> | -- | Input box style |
| textStyle | StyleProp<TextStyle> | -- | Input text style equivalent to react-native style for TextInput |
| disabled | boolean | -- | Set to true to disable the button |
| shouldMockDisableState | boolean | -- | Mock the disable behavior not the styling for popover contained inputs |
| left | ReactNode | -- | Render Icon/JSX on the left of the button |
| right | ReactNode | -- | Render Icon/JSX on the right of the button |
| status | BlossomStatus | primary | -- |
| size | BlossomSize | medium | -- |