Skip to main content

Customization

Custom Components​

Provides you with the option of replacing a certain component inside the Select in order to change its appearance, structure, or functionality. To use your custom components, pass them into the customComponents prop.

You will receive two arguments for your custom component renderer function:

  1. Component props - all the props and functionality the original component uses in the Select.
  2. Inner props - actions and attributes that should be applied to the JSX elements of the component.

Example​

Here is a simple example where we create a custom option component that contains a checkmark.

    Please select a value

Below is a list of every custom component you can pass to the customComponents prop, along with the componentProps and innerProps they provide.

Custom Option​

Component Props​

onOptionSelect​

(isSelected: boolean, option: SelectOptionT, isDisabled: boolean) => void

SelectOptionT Reference: SelectOptionT

value​

SelectOptionList

setValue​

Dispatch<SetStateAction<T>> | ((arg: T) => void)

clearInput​

() => void

focusInput​

() => void

getSelectOptionsMap​

() => Map<string, HTMLDivElement>

labelKey​

keyof SelectOptionT

SelectOptionT Reference: SelectOptionT

clearInputOnSelect​

boolean

isMultiValue​

boolean

isDisabled​

boolean

closeDropdown​

() => void

resetFocus​

() => void

isFocused​

boolean

optionIndex​

number

isSelected​

boolean

option​

SelectOptionT

isCategorized​

boolean

categoryKey​

keyof SelectOptionT

SelectOptionT Reference: SelectOptionT

Inner Props​

onClick​

(...args: any) => void

onMouseMove​

(...args: any) => void

data-category​

boolean

data-selected​

boolean

key​

string | number

ref​

React.LegacyRef<HTMLDivElement>

id​

string

className​

string

Custom Option List​

Component Props​

handlePageChange​

() => void

page​

number

isLastPage​

() => boolean | void

fetchOnScrollToBottom​

boolean | undefined

displayedOptions​

SelectOptionList | CategorizedSelectOptions

Types Reference: SelectOptionList

isCategorized​

boolean

isLoading​

boolean

handleScrollToBottom​

() => void

Inner Props​

wrapperClassName​

string

ref​

RefObject<HTMLDivElement>

listClassName​

string

Custom Category​

Component Props​

value​

SelectOptionList

categoryOptions​

CategorizedSelectOptions

categoryName​

keyof SelectOptionT

SelectOptionT Reference: SelectOptionT

selectedOptions​

SelectOptionList | null

SelectOptionList Reference: SelectOptionList

focusedOptionIdx​

number | null

renderOption​

(option: SelectOptionT, index: number, focusedOptionIdx: number | null, selectedOptions: SelectOptionList | null) => React.JSX.Element

Types Reference: SelectOptionT

Inner Props​

categoryHeaderClassName​

string

categoryListClassName​

string

Custom Input​

Component Props​

selectOptions​

SelectOptionT

displayedOptions​

SelectOptionList | CategorizedSelectOptions

Types Reference: SelectOptionList

value​

SelectOptionT

selectOptionListRef​

RefObject<HTMLDivElement>

setInputValue​

StateSetter<string>

getOriginalOptions​

() => SelectOptionList

SelectOptionList Reference: SelectOptionList

setSelectOptions​

(options: SelectOptionList) => void

SelectOptionList Reference: SelectOptionList

handleInputChange​

(e: ChangeEvent<HTMLInputElement>, value?: SelectOptionList) => void

SelectOptionList Reference: SelectOptionList

handleValueSelectOnKeyPress​

() => void

focusedOptionIndex​

number | null

focusedOptionCategory​

keyof SelectOptionT

SelectOptionT Reference: SelectOptionT

focusPreviousOption​

() => void

focusNextOption​

(fallbackDirection?: "next" | "previous" | "opposite") => void

openDropdown​

() => void

closeDropdown​

() => void

clearAllValues​

() => void

inputValue​

string

debounceInputUpdate​

boolean

preventInputUpdate​

(e: ChangeEvent<HTMLInputElement>, updatedInputValue: string) => boolean

isLoading​

boolean

Custom Multi-Value​

Component Props​

value​

SelectOptionT

labelKey​

keyof SelectOptionT

SelectOptionT Reference: SelectOptionT

valueList​

SelectOptionList

handleValueClear​

(e: React.MouseEvent<HTMLDivElement>, option: SelectOptionT) => void

SelectOptionT Reference: SelectOptionT

Inner Props​

className​

string

iconContainerClassName​

string

iconClassName​

string

onClick​

(e: React.MouseEvent<HTMLDivElement>, option: SelectOptionT) => void

SelectOptionT Reference: SelectOptionT

Custom Dropdown Indicator​

Component Props​

isOpen​

boolean

isLoading​

boolean

Inner Props​

className​

string

Custom Clear Indicator​

Component Props​

isLoading​

boolean | undefined

value​

SelectOptionList

clearValueOnInputChange​

boolean

inputValue​

string

clearInputOnIdicatorClick​

boolean

Inner Props​

onClick​

(e: MouseEvent<HTMLDivElement>) => void

className​

string

Custom Refs​

If you want to pass your own custom refs for the Select input and option list components so that you can control them outside the component, you can do so by passing them into the refs prop.

Example​

Here is a simple example with a button that will focus the input of the select component when clicked.

    Please select a value

Type Definitions​

TypeDefinition
SelectOptionT{ id: string or number, [key: string]: any }
SelectOptionListSelectOptionT []
CategorizedSelectOptions{ [key: string]: SelectOptionList }