Search
Props
searchable
Enables the search feature in the drop-down menu / modal.
searchable={true}
Type | Default |
---|---|
bool | false |
searchTextInputProps
Adds native props for the text input.
searchTextInputProps={{
maxLength: 25
}}
Type |
---|
TextInputProps |
searchWithRegionalAccents
Allows searching without typing local accents.
searchWithRegionalAccents={true}
Type | Default |
---|---|
bool | false |
disableLocalSearch
Disables search between local items. This comes in handy for remote search.
disableLocalSearch={true}
- See:
onChangeSearchText
Type | Default |
---|---|
bool | false |
addCustomItem
Shows the searched text as an item when there's nothing to show.
addCustomItem={true}
Type | Default | Requirements |
---|---|---|
bool | false | setItems |
Placeholder Text
Changes the placeholder text of the text input. Both of the following properties are available.
searchPlaceholder
searchPlaceholder="Search..."
translation
translation={{
SEARCH_PLACEHOLDER: "Search..."
}}
- See: Localization
Callbacks
onChangeSearchText
Callback that is called when the text changes in the text input.
loading={loading}
disableLocalSearch={true} // required for remote search
onChangeSearchText={(text) => {
// Show the loading animation
setLoading(true);
// Get items from API
API.get("/items/search", {
text
})
.then((items) => {
setItems(items);
})
.catch((err) => {
//
})
.finally(() => {
// Hide the loading animation
setLoading(false);
});
}}
Styling
searchContainerStyle
searchContainerStyle={{
borderBottomColor: "#dfdfdf"
}}
searchTextInputStyle
searchTextInputStyle={{
color: "#000"
}}
searchPlaceholderTextColor
searchPlaceholderTextColor="grey"
customItemContainerStyle
customItemContainerStyle={{
backgroundColor: "#dfdfdf"
}}
customItemLabelStyle
customItemLabelStyle={{
fontStyle: "italic"
}}