Props
React select is built on top of typescript and therefore there is full support for typescript.
options- Type:
async () => [....] - Description: Asynchronously retrieves selectable options for the Select component. Expects a function returning a Promise resolving to an array of objects representing options or a complex structure for grouped options, including labels and values.
value- Type:
string | string[] - Description: Represents the current value(s) of the Select component. It should be string or array of string.
noOptionMessage?- Type:
ReactNode - Description: Customizable message to display when no options are available within the Select component.
disableWhileLoading?- Type:
boolean - Default:
false - Description: Disables the Select component while asynchronously fetching options to prevent interaction until options are loaded.
placeholder?- Type:
ReactNode - Description: Placeholder text displayed when no option is selected.
multiple?- Type:
false - Description: Determines whether the Select component allows multiple options to be selected.
open?- Type:
boolean | undefined - Default:
false - Description: Controls the visibility of the dropdown menu.
disabled?- Type:
boolean - Description: Disables the Select component when set to true.
searchable?- Type:
boolean - Description: Enables a search feature within the Select component to quickly find options.
creatable?- Type:
boolean - Description: Enables users to create new options within the Select component.
showclear?- Type:
boolean - Description: Displays a clear button for removing selected value(s).
suffixRender?- Type:
(value: ISuffixRender) => ReactNode - Description: Allows customizing the appearance of the suffix area in the Select component.
groupRender?- Type:
(value: IGroupRender) => ReactNode - Description: Enables custom rendering styles for group label.
tagRender?- Type:
(value: ITagRender) => ReactNode - Description: Customizes the rendering style for selected tags, in multi-selection scenarios.
menuItemRender?- Type:
(value: IMenuItemRender) => ReactNode - Description: Facilitates customization of individual menu item's renderings.
valueRender?- Type:
(value: type_of_item) => ReactNode - Description: Customizes the rendering style for selected value in input field.
className?- Type:
string | (() => { focus?: string; disabled?: string; default?: string }) - Description: CSS classes for customizing select input field.
portalClass?- Type:
string - Description: CSS classes for the portal element.
menuClass?- Type:
string - Description: CSS classes for the dropdown menu container of the Select component.
animation?- Type:
null | AnimationProps(FramerMotion animation props) - Description: Configures animations for the dropdown menu. When set null, disables the animation.
onChange?- Type:
(value:object, valueAsString:string) => void - Description: Triggered upon changes to the selected value(s).
onSearch?- Type:
(text: string) => void | boolean - Description: Triggers when typing. If true or void is returned then it uses in-build filtering.
createLabel?- Type:
string - Default:
Create - Description: Prefix label for creating new element.
noMenu?- Type:
boolean - Default:
false - Description: Hides select popup menu.
Types
Various types used in above props.
type ISuffixRender = {
showclear?: boolean | undefined;
clear?: (() => void) | undefined;
isOpen?: boolean | undefined;
loading?: boolean | undefined;
}
type IGroupRender = {
label: string;
}
type ITagRender = {
remove: (value: string) => void;
value: string;
label: string;
}
type IOptionRender = ({
active,
focused,
disabled,
groupMode,
}: {
active: boolean;
focused: boolean;
disabled?: boolean;
groupMode?: boolean;
}) => ReactNode;
type IMenuItemRender = {
active?: boolean | undefined;
focused?: boolean | undefined;
label: string;
value: string;
render: IOptionRender;
innerProps?: { ... } | undefined;
}