react-select

react-select

Version 5.10.1
Published 1 month ago
725 kB
9 dependencies
MIT license

Install

npm i react-select

yarn add react-select

pnpm add react-select

Overview

A Select control built with and for ReactJS

Index

Variables

variable components

const components: {
    ClearIndicator: <
        Option,
        IsMulti extends boolean,
        Group extends GroupBase<Option>
    >(
        props: ClearIndicatorProps<Option, IsMulti, Group>
    ) => any;
    Control: <
        Option_1,
        IsMulti_1 extends boolean,
        Group_1 extends GroupBase<Option_1>
    >(
        props: ControlProps<Option_1, IsMulti_1, Group_1>
    ) => any;
    DropdownIndicator: <
        Option_2,
        IsMulti_2 extends boolean,
        Group_2 extends GroupBase<Option_2>
    >(
        props: DropdownIndicatorProps<Option_2, IsMulti_2, Group_2>
    ) => any;
    DownChevron: (props: DownChevronProps) => any;
    CrossIcon: (props: CrossIconProps) => any;
    Group: <
        Option_3,
        IsMulti_3 extends boolean,
        Group_3 extends GroupBase<Option_3>
    >(
        props: GroupProps<Option_3, IsMulti_3, Group_3>
    ) => any;
    GroupHeading: <
        Option_4,
        IsMulti_4 extends boolean,
        Group_4 extends GroupBase<Option_4>
    >(
        props: any
    ) => any;
    IndicatorsContainer: <
        Option_5,
        IsMulti_5 extends boolean,
        Group_5 extends GroupBase<Option_5>
    >(
        props: IndicatorsContainerProps<Option_5, IsMulti_5, Group_5>
    ) => any;
    IndicatorSeparator: <
        Option_6,
        IsMulti_6 extends boolean,
        Group_6 extends GroupBase<Option_6>
    >(
        props: IndicatorSeparatorProps<Option_6, IsMulti_6, Group_6>
    ) => any;
    Input: <
        Option_7,
        IsMulti_7 extends boolean,
        Group_7 extends GroupBase<Option_7>
    >(
        props: InputProps<Option_7, IsMulti_7, Group_7>
    ) => any;
    LoadingIndicator: <
        Option_8,
        IsMulti_8 extends boolean,
        Group_8 extends GroupBase<Option_8>
    >({
        innerProps,
        isRtl,
        size,
        ...restProps
    }: LoadingIndicatorProps<Option_8, IsMulti_8, Group_8>) => any;
    Menu: <Option_9, IsMulti_9 extends boolean, Group_9 extends GroupBase<Option_9>>(
        props: MenuProps<Option_9, IsMulti_9, Group_9>
    ) => any;
    MenuList: <
        Option_10,
        IsMulti_10 extends boolean,
        Group_10 extends GroupBase<Option_10>
    >(
        props: MenuListProps<Option_10, IsMulti_10, Group_10>
    ) => any;
    MenuPortal: <
        Option_11,
        IsMulti_11 extends boolean,
        Group_11 extends GroupBase<Option_11>
    >(
        props: MenuPortalProps<Option_11, IsMulti_11, Group_11>
    ) => import('@emotion/react').jsx.JSX.Element | null;
    LoadingMessage: <
        Option_12,
        IsMulti_12 extends boolean,
        Group_12 extends GroupBase<Option_12>
    >({
        children,
        innerProps,
        ...restProps
    }: NoticeProps<Option_12, IsMulti_12, Group_12>) => any;
    NoOptionsMessage: <
        Option_13,
        IsMulti_13 extends boolean,
        Group_13 extends GroupBase<Option_13>
    >({
        children,
        innerProps,
        ...restProps
    }: NoticeProps<Option_13, IsMulti_13, Group_13>) => any;
    MultiValue: <
        Option_14,
        IsMulti_14 extends boolean,
        Group_14 extends GroupBase<Option_14>
    >(
        props: MultiValueProps<Option_14, IsMulti_14, Group_14>
    ) => any;
    MultiValueContainer: <
        Option_15,
        IsMulti_15 extends boolean,
        Group_15 extends GroupBase<Option_15>
    >({
        children,
        innerProps,
    }: MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => any;
    MultiValueLabel: <
        Option_15,
        IsMulti_15 extends boolean,
        Group_15 extends GroupBase<Option_15>
    >({
        children,
        innerProps,
    }: MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => any;
    MultiValueRemove: typeof MultiValueRemove;
    Option: <
        Option_16,
        IsMulti_16 extends boolean,
        Group_16 extends GroupBase<Option_16>
    >(
        props: OptionProps<Option_16, IsMulti_16, Group_16>
    ) => any;
    Placeholder: <
        Option_17,
        IsMulti_17 extends boolean,
        Group_17 extends GroupBase<Option_17>
    >(
        props: PlaceholderProps<Option_17, IsMulti_17, Group_17>
    ) => any;
    SelectContainer: <
        Option_18,
        IsMulti_18 extends boolean,
        Group_18 extends GroupBase<Option_18>
    >(
        props: ContainerProps<Option_18, IsMulti_18, Group_18>
    ) => any;
    SingleValue: <
        Option_19,
        IsMulti_19 extends boolean,
        Group_19 extends GroupBase<Option_19>
    >(
        props: SingleValueProps<Option_19, IsMulti_19, Group_19>
    ) => any;
    ValueContainer: <
        Option_20,
        IsMulti_20 extends boolean,
        Group_20 extends GroupBase<Option_20>
    >(
        props: ValueContainerProps<Option_20, IsMulti_20, Group_20>
    ) => any;
};

variable defaultTheme

const defaultTheme: Theme;

variable StateManagedSelect

const StateManagedSelect: StateManagedSelect;

Functions

function createFilter

createFilter: <Option>(
    config?: Config<Option>
) => (option: FilterOptionOption<Option>, rawInput: string) => boolean;

function mergeStyles

mergeStyles: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
    source: StylesConfig<Option, IsMulti, Group>,
    target?: StylesConfig<Option, IsMulti, Group>
) => {
    clearIndicator?: (
        base: CSSObjectWithLabel,
        props: ClearIndicatorProps<Option, IsMulti, Group>
    ) => CSSObjectWithLabel;
    container?: (
        base: CSSObjectWithLabel,
        props: ContainerProps<Option, IsMulti, Group>
    ) => CSSObjectWithLabel;
    control?: (
        base: CSSObjectWithLabel,
        props: ControlProps<Option, IsMulti, Group>
    ) => CSSObjectWithLabel;
    dropdownIndicator?: (
        base: CSSObjectWithLabel,
        props: DropdownIndicatorProps<Option, IsMulti, Group>
    ) => CSSObjectWithLabel;
    group?: (
        base: CSSObjectWithLabel,
        props: GroupProps<Option, IsMulti, Group>
    ) => CSSObjectWithLabel;
    groupHeading?: (
        base: CSSObjectWithLabel,
        props: GroupHeadingProps<Option, IsMulti, Group>
    ) => CSSObjectWithLabel;
    indicatorsContainer?: (
        base: CSSObjectWithLabel,
        props: IndicatorsContainerProps<Option, IsMulti, Group>
    ) => CSSObjectWithLabel;
    indicatorSeparator?: (
        base: CSSObjectWithLabel,
        props: IndicatorSeparatorProps<Option, IsMulti, Group>
    ) => CSSObjectWithLabel;
    input?: (
        base: CSSObjectWithLabel,
        props: InputProps<Option, IsMulti, Group>
    ) => CSSObjectWithLabel;
    loadingIndicator?: (
        base: CSSObjectWithLabel,
        props: LoadingIndicatorProps<Option, IsMulti, Group>
    ) => CSSObjectWithLabel;
    loadingMessage?: (
        base: CSSObjectWithLabel,
        props: NoticeProps<Option, IsMulti, Group>
    ) => CSSObjectWithLabel;
    menu?: (
        base: CSSObjectWithLabel,
        props: MenuProps<Option, IsMulti, Group>
    ) => CSSObjectWithLabel;
    menuList?: (
        base: CSSObjectWithLabel,
        props: MenuListProps<Option, IsMulti, Group>
    ) => CSSObjectWithLabel;
    menuPortal?: (
        base: CSSObjectWithLabel,
        props: PortalStyleArgs
    ) => CSSObjectWithLabel;
    multiValue?: (
        base: CSSObjectWithLabel,
        props: MultiValueProps<Option, IsMulti, Group>
    ) => CSSObjectWithLabel;
    multiValueLabel?: (
        base: CSSObjectWithLabel,
        props: MultiValueProps<Option, IsMulti, Group>
    ) => CSSObjectWithLabel;
    multiValueRemove?: (
        base: CSSObjectWithLabel,
        props: MultiValueProps<Option, IsMulti, Group>
    ) => CSSObjectWithLabel;
    noOptionsMessage?: (
        base: CSSObjectWithLabel,
        props: NoticeProps<Option, IsMulti, Group>
    ) => CSSObjectWithLabel;
    option?: (
        base: CSSObjectWithLabel,
        props: OptionProps<Option, IsMulti, Group>
    ) => CSSObjectWithLabel;
    placeholder?: (
        base: CSSObjectWithLabel,
        props: PlaceholderProps<Option, IsMulti, Group>
    ) => CSSObjectWithLabel;
    singleValue?: (
        base: CSSObjectWithLabel,
        props: SingleValueProps<Option, IsMulti, Group>
    ) => CSSObjectWithLabel;
    valueContainer?: (
        base: CSSObjectWithLabel,
        props: ValueContainerProps<Option, IsMulti, Group>
    ) => CSSObjectWithLabel;
};

function NonceProvider

NonceProvider: ({
    nonce,
    children,
    cacheKey,
}: NonceProviderProps) => React.JSX.Element;

function useStateManager

useStateManager: <
    Option,
    IsMulti extends boolean,
    Group extends GroupBase<Option>,
    AdditionalProps
>({
    defaultInputValue,
    defaultMenuIsOpen,
    defaultValue,
    inputValue: propsInputValue,
    menuIsOpen: propsMenuIsOpen,
    onChange: propsOnChange,
    onInputChange: propsOnInputChange,
    onMenuClose: propsOnMenuClose,
    onMenuOpen: propsOnMenuOpen,
    value: propsValue,
    ...restSelectProps
}: StateManagerProps<Option, IsMulti, Group> &
    AdditionalProps) => PublicBaseSelectProps<Option, IsMulti, Group> &
    Omit<
        AdditionalProps,
        keyof StateManagerAdditionalProps<Option> | StateManagedPropKeys
    >;

Interfaces

interface ActionMetaBase

interface ActionMetaBase<Option> {}

property name

name?: string;

property option

option?: Option | undefined;

property removedValue

removedValue?: Option;

property removedValues

removedValues?: Options<Option>;

interface AriaGuidanceProps

interface AriaGuidanceProps {}

property 'aria-label'

'aria-label': AriaAttributes['aria-label'];

String value of selectProp aria-label

property context

context: GuidanceContext;

String indicating user's current context and available keyboard interactivity

property isDisabled

isDisabled: boolean | null;

Boolean value of selectProp isDisabled

property isInitialFocus

isInitialFocus: boolean;

Boolean value indicating if user focused the input for the first time

property isMulti

isMulti: boolean;

Boolean value of selectProp isMulti

property isSearchable

isSearchable: boolean;

Boolean value of selectProp isSearchable

property tabSelectsValue

tabSelectsValue: boolean;

Boolean value of selectProp tabSelectsValue

interface AriaLiveMessages

interface AriaLiveMessages<
    Option,
    IsMulti extends boolean,
    Group extends GroupBase<Option>
> {}

property guidance

guidance?: (props: AriaGuidanceProps) => string;

Guidance message used to convey component state and specific keyboard interactivity

property onChange

onChange?: (props: AriaOnChangeProps<Option, IsMulti>) => string;

OnChange message used to convey changes to value but also called when user selects disabled option

property onFilter

onFilter?: (props: AriaOnFilterProps) => string;

OnFilter message used to convey information about filtered results displayed in the menu

property onFocus

onFocus?: (props: AriaOnFocusProps<Option, Group>) => string;

OnFocus message used to convey information about the currently focused option or value

interface AriaOnFilterProps

interface AriaOnFilterProps {}

property inputValue

inputValue: string;

String indicating current inputValue of the input

property resultsMessage

resultsMessage: string;

String derived from selectProp screenReaderStatus

interface AriaOnFocusProps

interface AriaOnFocusProps<Option, Group extends GroupBase<Option>> {}

property context

context: OptionContext;

String indicating whether the option was focused in the menu or as (multi-) value

property focused

focused: Option;

Option that is being focused

property isAppleDevice

isAppleDevice: boolean;

Boolean indicating whether user uses Apple device

property isDisabled

isDisabled: boolean;

Boolean indicating whether focused menu option has been disabled

property isSelected

isSelected: boolean;

Boolean indicating whether focused menu option is an already selected option

property label

label: string;

String derived label from focused option/value

property options

options: OptionsOrGroups<Option, Group>;

Options provided as props to Select used to determine indexing

property selectValue

selectValue: Options<Option>;

selected option(s) of the Select

interface ClearActionMeta

interface ClearActionMeta<Option> extends ActionMetaBase<Option> {}

property action

action: 'clear';

property name

name?: string;

property removedValues

removedValues: Options<Option>;

interface ClearIndicatorProps

interface ClearIndicatorProps<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> extends CommonPropsAndClassName<Option, IsMulti, Group> {}

property children

children?: ReactNode;

The children to be rendered inside the indicator.

property innerProps

innerProps: JSX.IntrinsicElements['div'];

Props that will be passed on to the children.

property isFocused

isFocused: boolean;

The focused state of the select.

interface Colors

interface Colors {}

property danger

danger: string;

property dangerLight

dangerLight: string;

property neutral0

neutral0: string;

property neutral10

neutral10: string;

property neutral20

neutral20: string;

property neutral30

neutral30: string;

property neutral40

neutral40: string;

property neutral5

neutral5: string;

property neutral50

neutral50: string;

property neutral60

neutral60: string;

property neutral70

neutral70: string;

property neutral80

neutral80: string;

property neutral90

neutral90: string;

property primary

primary: string;

property primary25

primary25: string;

property primary50

primary50: string;

property primary75

primary75: string;

interface CommonProps

interface CommonProps<
    Option,
    IsMulti extends boolean,
    Group extends GroupBase<Option>
> {}

property clearValue

clearValue: () => void;

property cx

cx: CX;

property getClassNames

getClassNames: <Key extends keyof StylesProps<Option, IsMulti, Group>>(
    propertyName: Key,
    props: StylesProps<Option, IsMulti, Group>[Key]
) => string | undefined;

property getStyles

getStyles: GetStyles<Option, IsMulti, Group>;

Get the styles of a particular part of the select. Pass in the name of the property as the first argument, and the current props as the second argument. See the styles object for the properties available.

property getValue

getValue: () => Options<Option>;

property hasValue

hasValue: boolean;

property isMulti

isMulti: boolean;

property isRtl

isRtl: boolean;

property options

options: OptionsOrGroups<Option, Group>;

property selectOption

selectOption: (newValue: Option) => void;

property selectProps

selectProps: Props<Option, IsMulti, Group>;

property setValue

setValue: (
    newValue: OnChangeValue<Option, IsMulti>,
    action: SetValueAction,
    option?: Option
) => void;

property theme

theme: Theme;

interface CommonPropsAndClassName

interface CommonPropsAndClassName<
    Option,
    IsMulti extends boolean,
    Group extends GroupBase<Option>
> extends CommonProps<Option, IsMulti, Group> {}

property className

className?: string | undefined;

interface ContainerProps

interface ContainerProps<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> extends CommonPropsAndClassName<Option, IsMulti, Group> {}

property children

children: ReactNode;

The children to be rendered.

property innerProps

innerProps: JSX.IntrinsicElements['div'];

Inner props to be passed down to the container.

property isDisabled

isDisabled: boolean;

Whether the select is disabled.

property isFocused

isFocused: boolean;

interface ControlProps

interface ControlProps<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> extends CommonPropsAndClassName<Option, IsMulti, Group> {}

property children

children: ReactNode;

Children to render.

property innerProps

innerProps: JSX.IntrinsicElements['div'];

The mouse down event and the innerRef to pass down to the controller element.

property innerRef

innerRef: Ref<HTMLDivElement>;

property isDisabled

isDisabled: boolean;

Whether the select is disabled.

property isFocused

isFocused: boolean;

Whether the select is focused.

property menuIsOpen

menuIsOpen: boolean;

Whether the select is expanded.

interface CreateOptionActionMeta

interface CreateOptionActionMeta<Option> extends ActionMetaBase<Option> {}

property action

action: 'create-option';

property name

name?: string;

property option

option: Option;

interface DeselectOptionActionMeta

interface DeselectOptionActionMeta<Option> extends ActionMetaBase<Option> {}

property action

action: 'deselect-option';

property name

name?: string;

property option

option: Option | undefined;

interface DropdownIndicatorProps

interface DropdownIndicatorProps<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> extends CommonPropsAndClassName<Option, IsMulti, Group> {}

property children

children?: ReactNode;

The children to be rendered inside the indicator.

property innerProps

innerProps: JSX.IntrinsicElements['div'];

Props that will be passed on to the children.

property isDisabled

isDisabled: boolean;

property isFocused

isFocused: boolean;

The focused state of the select.

interface FilterOptionOption

interface FilterOptionOption<Option> {}

property data

readonly data: Option;

property label

readonly label: string;

property value

readonly value: string;

interface FormatOptionLabelMeta

interface FormatOptionLabelMeta<Option> {}

property context

context: FormatOptionLabelContext;

property inputValue

inputValue: string;

property selectValue

selectValue: Options<Option>;

interface GroupBase

interface GroupBase<Option> {}

property label

readonly label?: string;

property options

readonly options: readonly Option[];

interface GroupProps

interface GroupProps<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> extends CommonPropsAndClassName<Option, IsMulti, Group> {}

property children

children: ReactNode;

The children to be rendered.

property data

data: Group;

The data of the group.

property Heading

Heading: ComponentType<GroupHeadingProps<Option, IsMulti, Group>>;

Component to wrap the label, receives headingProps.

property headingProps

headingProps: ForwardedHeadingProps<Option, Group>;

Props to pass to Heading.

property innerProps

innerProps: JSX.IntrinsicElements['div'];

Props to be passed to the group element.

property label

label: ReactNode;

Label to be displayed in the heading component.

property options

options: Options<Option>;

interface IndicatorsContainerProps

interface IndicatorsContainerProps<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> extends CommonPropsAndClassName<Option, IsMulti, Group> {}

property children

children: ReactNode;

The children to be rendered.

property innerProps

innerProps?: {};

Props to be passed to the indicators container element.

property isDisabled

isDisabled: boolean;

interface IndicatorSeparatorProps

interface IndicatorSeparatorProps<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> extends CommonPropsAndClassName<Option, IsMulti, Group> {}

property innerProps

innerProps?: JSX.IntrinsicElements['span'];

property isDisabled

isDisabled: boolean;

property isFocused

isFocused: boolean;

interface InitialInputFocusedActionMeta

interface InitialInputFocusedActionMeta<Option, IsMulti extends boolean>
    extends ActionMetaBase<Option> {}

property action

action: 'initial-input-focus';

property options

options?: Options<Option>;

property value

value: OnChangeValue<Option, IsMulti>;

interface InputActionMeta

interface InputActionMeta {}

property action

action: InputAction;

property prevInputValue

prevInputValue: string;

The previous value of the search input.

interface LoadingIndicatorProps

interface LoadingIndicatorProps<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> extends CommonPropsAndClassName<Option, IsMulti, Group> {}

property innerProps

innerProps: JSX.IntrinsicElements['div'];

Props that will be passed on to the children.

property isDisabled

isDisabled: boolean;

property isFocused

isFocused: boolean;

The focused state of the select.

property size

size: number;

Set size of the container.

interface MenuListProps

interface MenuListProps<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> extends CommonPropsAndClassName<Option, IsMulti, Group> {}

property children

children: ReactNode;

The children to be rendered.

property focusedOption

focusedOption: Option;

The currently focused option

property innerProps

innerProps: JSX.IntrinsicElements['div'];

Props to be passed to the menu-list wrapper.

property innerRef

innerRef: Ref<HTMLDivElement>;

Inner ref to DOM ReactNode

property maxHeight

maxHeight: number;

Set the max height of the Menu component

interface MenuProps

interface MenuProps<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> extends CommonPropsAndClassName<Option, IsMulti, Group>,
        MenuPlacementProps {}

property children

children: ReactNode;

The children to be rendered.

property innerProps

innerProps: JSX.IntrinsicElements['div'];

property innerRef

innerRef: Ref<HTMLDivElement>;

Reference to the internal element, consumed by the MenuPlacer component

property isLoading

isLoading: boolean;

property placement

placement: CoercedMenuPlacement;

interface MultiValueGenericProps

interface MultiValueGenericProps<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> {}

property children

children: ReactNode;

property data

data: any;

property innerProps

innerProps: {
    className?: string;
};

property selectProps

selectProps: Props<Option, IsMulti, Group>;

interface MultiValueProps

interface MultiValueProps<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> extends CommonPropsAndClassName<Option, IsMulti, Group> {}

property children

children: ReactNode;

property components

components: MultiValueComponents<Option, IsMulti, Group>;

property cropWithEllipsis

cropWithEllipsis?: boolean;

property data

data: Option;

property index

index: number;

property innerProps

innerProps: JSX.IntrinsicElements['div'];

property isDisabled

isDisabled: boolean;

property isFocused

isFocused: boolean;

property removeProps

removeProps: JSX.IntrinsicElements['div'];

interface MultiValueRemoveProps

interface MultiValueRemoveProps<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> {}

property children

children?: ReactNode;

property data

data: Option;

property innerProps

innerProps: JSX.IntrinsicElements['div'];

property selectProps

selectProps: Props<Option, IsMulti, Group>;

interface NoticeProps

interface NoticeProps<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> extends CommonPropsAndClassName<Option, IsMulti, Group> {}

property children

children: ReactNode;

The children to be rendered.

property innerProps

innerProps: JSX.IntrinsicElements['div'];

Props to be passed on to the wrapper.

interface OptionProps

interface OptionProps<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> extends CommonPropsAndClassName<Option, IsMulti, Group> {}

property children

children: ReactNode;

The children to be rendered.

property data

data: Option;

The data of the selected option.

property innerProps

innerProps: JSX.IntrinsicElements['div'];

props passed to the wrapping element for the group.

property innerRef

innerRef: RefCallback<HTMLDivElement>;

Inner ref to DOM Node

property isDisabled

isDisabled: boolean;

Whether the option is disabled.

property isFocused

isFocused: boolean;

Whether the option is focused.

property isSelected

isSelected: boolean;

Whether the option is selected.

property label

label: string;

Text to be displayed representing the option.

property type

type: 'option';

Type is used by the menu to determine whether this is an option or a group. In the case of option this is always option. *

interface PlaceholderProps

interface PlaceholderProps<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> extends CommonPropsAndClassName<Option, IsMulti, Group> {}

property children

children: ReactNode;

The children to be rendered.

property innerProps

innerProps: JSX.IntrinsicElements['div'];

props passed to the wrapping element for the group.

property isDisabled

isDisabled: boolean;

property isFocused

isFocused: boolean;

interface PopValueActionMeta

interface PopValueActionMeta<Option> extends ActionMetaBase<Option> {}

property action

action: 'pop-value';

property name

name?: string;

property removedValue

removedValue: Option;

interface RemoveValueActionMeta

interface RemoveValueActionMeta<Option> extends ActionMetaBase<Option> {}

property action

action: 'remove-value';

property name

name?: string;

property removedValue

removedValue: Option;

interface SelectOptionActionMeta

interface SelectOptionActionMeta<Option> extends ActionMetaBase<Option> {}

property action

action: 'select-option';

property name

name?: string;

property option

option: Option | undefined;

interface SingleValueProps

interface SingleValueProps<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> extends CommonPropsAndClassName<Option, IsMulti, Group> {}

property children

children: ReactNode;

The children to be rendered.

property data

data: Option;

The data of the selected option rendered in the Single Value component.

property innerProps

innerProps: JSX.IntrinsicElements['div'];

Props passed to the wrapping element for the group.

property isDisabled

isDisabled: boolean;

Whether this is disabled.

interface Theme

interface Theme {}

property borderRadius

borderRadius: number;

property colors

colors: Colors;

property spacing

spacing: ThemeSpacing;

interface ThemeSpacing

interface ThemeSpacing {}

property baseUnit

baseUnit: number;

property controlHeight

controlHeight: number;

property menuGutter

menuGutter: number;

interface ValueContainerProps

interface ValueContainerProps<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> extends CommonPropsAndClassName<Option, IsMulti, Group> {}

property children

children: ReactNode;

The children to be rendered.

property innerProps

innerProps?: JSX.IntrinsicElements['div'];

Props to be passed to the value container element.

property isDisabled

isDisabled: boolean;

Type Aliases

type ActionMeta

type ActionMeta<Option> =
    | SelectOptionActionMeta<Option>
    | DeselectOptionActionMeta<Option>
    | RemoveValueActionMeta<Option>
    | PopValueActionMeta<Option>
    | ClearActionMeta<Option>
    | CreateOptionActionMeta<Option>;

type AriaGuidance

type AriaGuidance = (props: AriaGuidanceProps) => string;

type AriaOnChange

type AriaOnChange<Option, IsMulti extends boolean> = (
    props: AriaOnChangeProps<Option, IsMulti>
) => string;

type AriaOnChangeProps

type AriaOnChangeProps<Option, IsMulti extends boolean> = AriaSelection<
    Option,
    IsMulti
> & {
    /** String derived label from selected or removed option/value */
    label: string;
    /** Array of labels derived from multiple selected or cleared options */
    labels: string[];
    /** Boolean indicating if the selected menu option is disabled */
    isDisabled: boolean | null;
};

type AriaOnFilter

type AriaOnFilter = (props: AriaOnFilterProps) => string;

type AriaOnFocus

type AriaOnFocus<Option, Group extends GroupBase<Option> = GroupBase<Option>> = (
    props: AriaOnFocusProps<Option, Group>
) => string;

type ClassNamesConfig

type ClassNamesConfig<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> = {
    [K in keyof StylesProps<Option, IsMulti, Group>]?: (
        props: StylesProps<Option, IsMulti, Group>[K]
    ) => string;
};

type ClassNamesState

type ClassNamesState = {
    [key: string]: boolean;
};

type CoercedMenuPlacement

type CoercedMenuPlacement = 'bottom' | 'top';

type CSSObjectWithLabel

type CSSObjectWithLabel = CSSObject & {
    label?: string;
};

type CX

type CX = (state: ClassNamesState, ...classNames: (string | undefined)[]) => string;

type FocusDirection

type FocusDirection = 'up' | 'down' | 'pageup' | 'pagedown' | 'first' | 'last';

type FormatOptionLabelContext

type FormatOptionLabelContext = 'menu' | 'value';

type GetOptionLabel

type GetOptionLabel<Option> = (option: Option) => string;

type GetOptionValue

type GetOptionValue<Option> = (option: Option) => string;

type GetStyles

type GetStyles<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = <
    Key extends keyof StylesProps<Option, IsMulti, Group>
>(
    propertyName: Key,
    props: StylesProps<Option, IsMulti, Group>[Key]
) => CSSObjectWithLabel;

type GroupHeadingProps

type GroupHeadingProps<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> = GroupHeadingPropsDefinedProps<Option, IsMulti, Group> &
    JSX.IntrinsicElements['div'];

type GuidanceContext

type GuidanceContext = 'menu' | 'input' | 'value';

type InputAction

type InputAction = 'set-value' | 'input-change' | 'input-blur' | 'menu-close';

type InputProps

type InputProps<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> = InputSpecificProps<Option, IsMulti, Group>;

type MenuPlacement

type MenuPlacement = 'auto' | 'bottom' | 'top';

type MenuPosition

type MenuPosition = 'absolute' | 'fixed';

type MultiValue

type MultiValue<Option> = readonly Option[];

type OnChangeValue

type OnChangeValue<Option, IsMulti extends boolean> = IsMulti extends true
    ? MultiValue<Option>
    : SingleValue<Option>;

type OptionContext

type OptionContext = 'menu' | 'value';

type Options

type Options<Option> = readonly Option[];

type OptionsOrGroups

type OptionsOrGroups<Option, Group extends GroupBase<Option>> = readonly (
    | Option
    | Group
)[];

type Props

type StateManagerProps<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> = SelectPropsWithOptionalStateManagedProps<Option, IsMulti, Group> &
    StateManagerAdditionalProps<Option>;

type PropsValue

type PropsValue<Option> = MultiValue<Option> | SingleValue<Option>;

type SelectComponentsConfig

type SelectComponentsConfig<
    Option,
    IsMulti extends boolean,
    Group extends GroupBase<Option>
> = Partial<SelectComponents<Option, IsMulti, Group>>;

type SelectInstance

type SelectInstance<
    Option = unknown,
    IsMulti extends boolean = false,
    Group extends GroupBase<Option> = GroupBase<Option>
> = Select<Option, IsMulti, Group>;

type SetValueAction

type SetValueAction = 'select-option' | 'deselect-option';

type SingleValue

type SingleValue<Option> = Option | null;

type StateManagedSelect

type StateManagedSelect = <
    Option = unknown,
    IsMulti extends boolean = false,
    Group extends GroupBase<Option> = GroupBase<Option>
>(
    props: StateManagerProps<Option, IsMulti, Group> &
        RefAttributes<Select<Option, IsMulti, Group>>
) => ReactElement;

type StylesConfig

type StylesConfig<
    Option = unknown,
    IsMulti extends boolean = boolean,
    Group extends GroupBase<Option> = GroupBase<Option>
> = {
    [K in keyof StylesProps<Option, IsMulti, Group>]?: (
        base: CSSObjectWithLabel,
        props: StylesProps<Option, IsMulti, Group>[K]
    ) => CSSObjectWithLabel;
};

type ThemeConfig

type ThemeConfig = Theme | ((theme: Theme) => Theme);

Package Files (22)

Dependencies (9)

Dev Dependencies (6)

Peer Dependencies (2)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-select.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-select)

HTML

<a href="https://www.jsdocs.io/package/react-select"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 1 month ago.
Package analyzed in 7575 ms.
Missing or incorrect documentation? Open an issue for this package.