Interface: NamespaceSelectProps#
Renderer.Component.NamespaceSelectProps
Hierarchy#
↳ NamespaceSelectProps
Table of contents#
Properties#
- allowCreateWhileLoading
- aria-errormessage
- aria-invalid
- aria-label
- aria-labelledby
- aria-live
- ariaLiveMessages
- autoConvertOptions
- autoFocus
- backspaceRemovesValue
- blurInputOnSelect
- captureMenuScroll
- className
- classNamePrefix
- closeMenuOnScroll
- closeMenuOnSelect
- components
- controlShouldRenderValue
- createOptionPosition
- defaultInputValue
- defaultMenuIsOpen
- defaultValue
- delimiter
- escapeClearsValue
- filterOption
- form
- formatGroupLabel
- formatOptionLabel
- getOptionLabel
- getOptionValue
- hideSelectedOptions
- id
- inputId
- inputValue
- instanceId
- isClearable
- isCreatable
- isDisabled
- isLoading
- isMulti
- isOptionDisabled
- isOptionSelected
- isRtl
- isSearchable
- loadingMessage
- maxMenuHeight
- menuClass
- menuIsOpen
- menuPlacement
- menuPortalTarget
- menuPosition
- menuShouldBlockScroll
- menuShouldScrollIntoView
- minMenuHeight
- name
- noOptionsMessage
- onBlur
- onFocus
- onKeyDown
- onMenuScrollToBottom
- onMenuScrollToTop
- openMenuOnClick
- openMenuOnFocus
- options
- pageSize
- placeholder
- screenReaderStatus
- showAllNamespacesOption
- showIcons
- styles
- tabIndex
- tabSelectsValue
- theme
- themeName
- value
Methods#
- customizeOptions
- formatCreateLabel
- getNewOptionData
- isValidNewOption
- onChange
- onCreateOption
- onInputChange
- onMenuClose
- onMenuOpen
- sort
Properties#
allowCreateWhileLoading#
• Optional
allowCreateWhileLoading: boolean
Allow options to be created while the isLoading
prop is true. Useful to
prevent the "create new ..." option being displayed while async results are
still being loaded.
Inherited from#
SelectProps.allowCreateWhileLoading
aria-errormessage#
• Optional
aria-errormessage: string
HTML ID of an element containing an error message related to the input
Inherited from#
aria-invalid#
• Optional
aria-invalid: boolean
| "true"
| "false"
| "grammar"
| "spelling"
Indicate if the value entered in the field is invalid
Inherited from#
aria-label#
• Optional
aria-label: string
Aria label (for assistive tech)
Inherited from#
aria-labelledby#
• Optional
aria-labelledby: string
HTML ID of an element that should be used as the label (for assistive tech)
Inherited from#
aria-live#
• Optional
aria-live: "off"
| "assertive"
| "polite"
Used to set the priority with which screen reader should treat updates to live regions. The possible settings are: off, polite (default) or assertive
Inherited from#
ariaLiveMessages#
• Optional
ariaLiveMessages: AriaLiveMessages
<any
, boolean
, GroupBase
<any
>>
Customize the messages used by the aria-live component
Inherited from#
autoConvertOptions#
• Optional
autoConvertOptions: boolean
Inherited from#
SelectProps.autoConvertOptions
autoFocus#
• Optional
autoFocus: boolean
Focus the control when it is mounted
Inherited from#
backspaceRemovesValue#
• Optional
backspaceRemovesValue: boolean
Remove the currently focused option when the user presses backspace when Select isClearable or isMulti
Inherited from#
SelectProps.backspaceRemovesValue
blurInputOnSelect#
• Optional
blurInputOnSelect: boolean
Remove focus from the input when the user selects an option (handy for dismissing the keyboard on touch devices)
Inherited from#
captureMenuScroll#
• Optional
captureMenuScroll: boolean
When the user reaches the top/bottom of the menu, prevent scroll on the scroll-parent
Inherited from#
className#
• Optional
className: string
Sets a className attribute on the outer component
Inherited from#
classNamePrefix#
• Optional
classNamePrefix: string
If provided, all inner components will be given a prefixed className attribute.
This is useful when styling via CSS classes instead of the Styles API approach.
Inherited from#
closeMenuOnScroll#
• Optional
closeMenuOnScroll: boolean
| (event
: Event
) => boolean
If true
, close the select menu when the user scrolls the document/body.
If a function, takes a standard javascript ScrollEvent
you return a boolean:
true
=> The menu closes
false
=> The menu stays open
This is useful when you have a scrollable modal and want to portal the menu out, but want to avoid graphical issues.
Inherited from#
closeMenuOnSelect#
• Optional
closeMenuOnSelect: boolean
Close the select menu when the user selects an option
Inherited from#
components#
• Optional
components: Partial
<SelectComponents
<any
, boolean
, GroupBase
<any
>>>
This complex object includes all the compositional components that are used
in react-select
. If you wish to overwrite a component, pass in an object
with the appropriate namespace.
If you only wish to restyle a component, we recommend using the styles
prop
instead. For a list of the components that can be passed in, and the shape
that will be passed to them, see the components docs
Inherited from#
controlShouldRenderValue#
• Optional
controlShouldRenderValue: boolean
Whether the value of the select, e.g. SingleValue, should be displayed in the control.
Inherited from#
SelectProps.controlShouldRenderValue
createOptionPosition#
• Optional
createOptionPosition: "first"
| "last"
Sets the position of the createOption element in your options list. Defaults to 'last'
Inherited from#
SelectProps.createOptionPosition
defaultInputValue#
• Optional
defaultInputValue: string
Inherited from#
defaultMenuIsOpen#
• Optional
defaultMenuIsOpen: boolean
Inherited from#
defaultValue#
• Optional
defaultValue: any
Inherited from#
delimiter#
• Optional
delimiter: string
Delimiter used to join multiple values into a single HTML Input value
Inherited from#
escapeClearsValue#
• Optional
escapeClearsValue: boolean
Clear all values when the user presses escape AND the menu is closed
Inherited from#
filterOption#
• Optional
filterOption: (option
: FilterOptionOption
<any
>, inputValue
: string
) => boolean
Type declaration#
▸ (option
, inputValue
): boolean
Custom method to filter whether an option should be displayed in the menu
Parameters#
Name | Type |
---|---|
option |
FilterOptionOption <any > |
inputValue |
string |
Returns#
boolean
Inherited from#
form#
• Optional
form: string
Sets the form attribute on the input
Inherited from#
formatGroupLabel#
• Optional
formatGroupLabel: (group
: GroupBase
<any
>) => ReactNode
Type declaration#
▸ (group
): ReactNode
Formats group labels in the menu as React components
An example can be found in the Replacing builtins documentation.
Parameters#
Name | Type |
---|---|
group |
GroupBase <any > |
Returns#
ReactNode
Inherited from#
formatOptionLabel#
• Optional
formatOptionLabel: (data
: any
, formatOptionLabelMeta
: FormatOptionLabelMeta
<any
>) => ReactNode
Type declaration#
▸ (data
, formatOptionLabelMeta
): ReactNode
Formats option labels in the menu and control as React components
Parameters#
Name | Type |
---|---|
data |
any |
formatOptionLabelMeta |
FormatOptionLabelMeta <any > |
Returns#
ReactNode
Inherited from#
getOptionLabel#
• Optional
getOptionLabel: GetOptionLabel
<any
>
Resolves option data to a string to be displayed as the label by components
Note: Failure to resolve to a string type can interfere with filtering and screen reader support.
Inherited from#
getOptionValue#
• Optional
getOptionValue: GetOptionValue
<any
>
Resolves option data to a string to compare options and specify value attributes
Inherited from#
hideSelectedOptions#
• Optional
hideSelectedOptions: boolean
Hide the selected option from the menu
Inherited from#
SelectProps.hideSelectedOptions
id#
• Optional
id: string
Inherited from#
inputId#
• Optional
inputId: string
The id of the search input
Inherited from#
inputValue#
• Optional
inputValue: string
The value of the search input
Inherited from#
instanceId#
• Optional
instanceId: string
| number
Define an id prefix for the select components e.g. {your-id}-value
Inherited from#
isClearable#
• Optional
isClearable: boolean
Is the select value clearable
Inherited from#
isCreatable#
• Optional
isCreatable: boolean
Inherited from#
isDisabled#
• Optional
isDisabled: boolean
Is the select disabled
Inherited from#
isLoading#
• Optional
isLoading: boolean
Is the select in a state of loading (async)
Inherited from#
isMulti#
• Optional
isMulti: boolean
Support multiple selected options
Inherited from#
isOptionDisabled#
• Optional
isOptionDisabled: (option
: any
, selectValue
: Options
<any
>) => boolean
Type declaration#
▸ (option
, selectValue
): boolean
Override the built-in logic to detect whether an option is disabled
An example can be found in the Replacing builtins documentation.
Parameters#
Name | Type |
---|---|
option |
any |
selectValue |
Options <any > |
Returns#
boolean
Inherited from#
isOptionSelected#
• Optional
isOptionSelected: (option
: any
, selectValue
: Options
<any
>) => boolean
Type declaration#
▸ (option
, selectValue
): boolean
Override the built-in logic to detect whether an option is selected
Parameters#
Name | Type |
---|---|
option |
any |
selectValue |
Options <any > |
Returns#
boolean
Inherited from#
isRtl#
• Optional
isRtl: boolean
Is the select direction right-to-left
Inherited from#
isSearchable#
• Optional
isSearchable: boolean
Whether to enable search functionality
Inherited from#
loadingMessage#
• Optional
loadingMessage: (obj
: { inputValue
: string
}) => ReactNode
Type declaration#
▸ (obj
): ReactNode
Async: Text to display when loading options
Parameters#
Name | Type |
---|---|
obj |
Object |
obj.inputValue |
string |
Returns#
ReactNode
Inherited from#
maxMenuHeight#
• Optional
maxMenuHeight: number
Maximum height of the menu before scrolling
Inherited from#
menuClass#
• Optional
menuClass: string
Inherited from#
menuIsOpen#
• Optional
menuIsOpen: boolean
Whether the menu is open
Inherited from#
menuPlacement#
• Optional
menuPlacement: MenuPlacement
Default placement of the menu in relation to the control. 'auto' will flip when there isn't enough space below the control.
Inherited from#
menuPortalTarget#
• Optional
menuPortalTarget: HTMLElement
Whether the menu should use a portal, and where it should attach
An example can be found in the Portaling documentation
Inherited from#
menuPosition#
• Optional
menuPosition: MenuPosition
The CSS position value of the menu, when "fixed" extra layout management is required
Inherited from#
menuShouldBlockScroll#
• Optional
menuShouldBlockScroll: boolean
Whether to block scroll events when the menu is open
Inherited from#
SelectProps.menuShouldBlockScroll
menuShouldScrollIntoView#
• Optional
menuShouldScrollIntoView: boolean
Whether the menu should be scrolled into view when it opens
Inherited from#
SelectProps.menuShouldScrollIntoView
minMenuHeight#
• Optional
minMenuHeight: number
Minimum height of the menu before flipping
Inherited from#
name#
• Optional
name: string
Name of the HTML Input (optional - without this, no input will be rendered)
Inherited from#
noOptionsMessage#
• Optional
noOptionsMessage: (obj
: { inputValue
: string
}) => ReactNode
Type declaration#
▸ (obj
): ReactNode
Text to display when there are no options
Parameters#
Name | Type |
---|---|
obj |
Object |
obj.inputValue |
string |
Returns#
ReactNode
Inherited from#
onBlur#
• Optional
onBlur: FocusEventHandler
<HTMLInputElement
>
Handle blur events on the control
Inherited from#
onFocus#
• Optional
onFocus: FocusEventHandler
<HTMLInputElement
>
Handle focus events on the control
Inherited from#
onKeyDown#
• Optional
onKeyDown: KeyboardEventHandler
<HTMLDivElement
>
Handle key down events on the select
Inherited from#
onMenuScrollToBottom#
• Optional
onMenuScrollToBottom: (event
: WheelEvent
| TouchEvent
) => void
Type declaration#
▸ (event
): void
Fired when the user scrolls to the bottom of the menu
Parameters#
Name | Type |
---|---|
event |
WheelEvent | TouchEvent |
Returns#
void
Inherited from#
SelectProps.onMenuScrollToBottom
onMenuScrollToTop#
• Optional
onMenuScrollToTop: (event
: WheelEvent
| TouchEvent
) => void
Type declaration#
▸ (event
): void
Fired when the user scrolls to the top of the menu
Parameters#
Name | Type |
---|---|
event |
WheelEvent | TouchEvent |
Returns#
void
Inherited from#
openMenuOnClick#
• Optional
openMenuOnClick: boolean
Allows control of whether the menu is opened when the Select is clicked
Inherited from#
openMenuOnFocus#
• Optional
openMenuOnFocus: boolean
Allows control of whether the menu is opened when the Select is focused
Inherited from#
options#
• Optional
options: OptionsOrGroups
<any
, GroupBase
<any
>>
Array of options that populate the select menu
Inherited from#
pageSize#
• Optional
pageSize: number
Number of options to jump in menu when page{up|down} keys are used
Inherited from#
placeholder#
• Optional
placeholder: ReactNode
Placeholder for the select value
Inherited from#
screenReaderStatus#
• Optional
screenReaderStatus: (obj
: { count
: number
}) => string
Type declaration#
▸ (obj
): string
Status to relay to screen readers
Parameters#
Name | Type |
---|---|
obj |
Object |
obj.count |
number |
Returns#
string
Inherited from#
SelectProps.screenReaderStatus
showAllNamespacesOption#
• Optional
showAllNamespacesOption: boolean
showIcons#
• Optional
showIcons: boolean
styles#
• Optional
styles: StylesConfig
<any
, boolean
, GroupBase
<any
>>
Style modifier methods
A basic example can be found at the bottom of the Replacing builtins documentation.
Inherited from#
tabIndex#
• Optional
tabIndex: number
Sets the tabIndex attribute on the input
Inherited from#
tabSelectsValue#
• Optional
tabSelectsValue: boolean
Select the currently focused option when the user presses tab
Inherited from#
theme#
• Optional
theme: ThemeConfig
Theme modifier method
Inherited from#
themeName#
• Optional
themeName: "lens"
| "light"
| "outlined"
| "dark"
Inherited from#
value#
• Optional
value: any
Inherited from#
Methods#
customizeOptions#
▸ Optional
customizeOptions(options
): SelectOption
<any
>[]
Parameters#
Name | Type |
---|---|
options |
SelectOption <any >[] |
Returns#
SelectOption
<any
>[]
formatCreateLabel#
▸ Optional
formatCreateLabel(inputValue
): ReactNode
Gets the label for the "create new ..." option in the menu. Is given the current input value.
Parameters#
Name | Type |
---|---|
inputValue |
string |
Returns#
ReactNode
Inherited from#
getNewOptionData#
▸ Optional
getNewOptionData(inputValue
, optionLabel
): Option
Returns the data for the new option when it is created. Used to display the
value, and is passed to onChange
.
Parameters#
Name | Type |
---|---|
inputValue |
string |
optionLabel |
ReactNode |
Returns#
Option
Inherited from#
isValidNewOption#
▸ Optional
isValidNewOption(inputValue
, value
, options
, accessors
): boolean
Determines whether the "create new ..." option should be displayed based on the current input value, select value and options array.
Parameters#
Name | Type |
---|---|
inputValue |
string |
value |
Options <Option > |
options |
OptionsOrGroups <Option , Group > |
accessors |
Accessors <Option > |
Returns#
boolean
Inherited from#
onChange#
▸ Optional
onChange(option
, meta?
): void
Parameters#
Name | Type |
---|---|
option |
any |
meta? |
ActionMeta <any > |
Returns#
void
Inherited from#
onCreateOption#
▸ Optional
onCreateOption(inputValue
): void
If provided, this will be called with the input value when a new option is
created, and onChange
will not be called. Use this when you need more
control over what happens when new options are created.
Parameters#
Name | Type |
---|---|
inputValue |
string |
Returns#
void
Inherited from#
onInputChange#
▸ Optional
onInputChange(newValue
, actionMeta
): void
Handle change events on the input
Parameters#
Name | Type |
---|---|
newValue |
string |
actionMeta |
InputActionMeta |
Returns#
void
Inherited from#
onMenuClose#
▸ Optional
onMenuClose(): void
Handle the menu closing
Returns#
void
Inherited from#
onMenuOpen#
▸ Optional
onMenuOpen(): void
Handle the menu opening
Returns#
void
Inherited from#
sort#
▸ Optional
sort(a
, b
): number
Parameters#
Name | Type |
---|---|
a |
SelectOption <string > |
b |
SelectOption <string > |
Returns#
number