• Version 14.15.0
  • Published
  • 341 kB
  • 7 dependencies
  • MIT license


npm i rc-select
yarn add rc-select
pnpm add rc-select


React Select



variable BaseSelect

const BaseSelect: React.ForwardRefExoticComponent<any>;

    variable OptGroup

    const OptGroup: OptionGroupFC;
    • This is a placeholder, not real render in dom

    variable Option

    const Option: OptionFC;
    • This is a placeholder, not real render in dom

    variable TypedSelect

    const TypedSelect: (<
    ValueType = any,
    OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType
    props: any
    ) => React.ReactElement) & { Option: typeof Option; OptGroup: typeof OptGroup };


      function useBaseProps

      useBaseProps: () => BaseSelectContextProps;


        interface BaseSelectProps

        interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttributes {}

          property allowClear

          | boolean
          | {
          clearIcon?: RenderNode;

            property animation

            animation?: string;

              property autoFocus

              autoFocus?: boolean;

                property builtinPlacements

                builtinPlacements?: BuildInPlacements;

                  property choiceTransitionName

                  choiceTransitionName?: string;

                    property className

                    className?: string;

                      property clearIcon

                      clearIcon?: RenderNode;
                      • Clear all icon


                        Please use allowClear instead

                      property defaultOpen

                      defaultOpen?: boolean;

                        property direction

                        direction?: 'ltr' | 'rtl';

                          property disabled

                          disabled?: boolean;

                            property dropdownAlign

                            dropdownAlign?: AlignType;

                              property dropdownClassName

                              dropdownClassName?: string;

                                property dropdownMatchSelectWidth

                                dropdownMatchSelectWidth?: boolean | number;

                                  property dropdownRender

                                  dropdownRender?: (menu: React.ReactElement) => React.ReactElement;

                                    property dropdownStyle

                                    dropdownStyle?: React.CSSProperties;

                                      property getInputElement

                                      getInputElement?: () => JSX.Element;
                                      • Internal usage. Do not use in your production.

                                      property getPopupContainer

                                      getPopupContainer?: RenderDOMFunc;

                                        property getRawInputElement

                                        getRawInputElement?: () => JSX.Element;
                                        • Internal usage. Do not use in your production.

                                        property loading

                                        loading?: boolean;

                                          property maxLength

                                          maxLength?: number;

                                            property maxTagCount

                                            maxTagCount?: number | 'responsive';

                                              property maxTagPlaceholder

                                              | React.ReactNode
                                              | ((omittedValues: DisplayValueType[]) => React.ReactNode);

                                                property maxTagTextLength

                                                maxTagTextLength?: number;

                                                  property mode

                                                  mode?: Mode;

                                                    property notFoundContent

                                                    notFoundContent?: React.ReactNode;

                                                      property onBlur

                                                      onBlur?: React.FocusEventHandler<HTMLElement>;

                                                        property onClear

                                                        onClear?: () => void;

                                                          property onClick

                                                          onClick?: React.MouseEventHandler<HTMLDivElement>;

                                                            property onDropdownVisibleChange

                                                            onDropdownVisibleChange?: (open: boolean) => void;

                                                              property onFocus

                                                              onFocus?: React.FocusEventHandler<HTMLElement>;

                                                                property onInputKeyDown

                                                                onInputKeyDown?: React.KeyboardEventHandler<
                                                                HTMLInputElement | HTMLTextAreaElement

                                                                  property onKeyDown

                                                                  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;

                                                                    property onKeyUp

                                                                    onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;

                                                                      property onMouseDown

                                                                      onMouseDown?: React.MouseEventHandler<HTMLDivElement>;

                                                                        property onMouseEnter

                                                                        onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;

                                                                          property onMouseLeave

                                                                          onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;

                                                                            property onPopupScroll

                                                                            onPopupScroll?: React.UIEventHandler<HTMLDivElement>;

                                                                              property open

                                                                              open?: boolean;

                                                                                property placeholder

                                                                                placeholder?: React.ReactNode;

                                                                                  property placement

                                                                                  placement?: Placement;

                                                                                    property removeIcon

                                                                                    removeIcon?: RenderNode;
                                                                                    • Selector remove icon

                                                                                    property showAction

                                                                                    showAction?: ('focus' | 'click')[];

                                                                                      property showSearch

                                                                                      showSearch?: boolean;

                                                                                        property style

                                                                                        style?: React.CSSProperties;

                                                                                          property suffixIcon

                                                                                          suffixIcon?: RenderNode;

                                                                                            property tabIndex

                                                                                            tabIndex?: number;

                                                                                              property tagRender

                                                                                              tagRender?: (props: CustomTagProps) => React.ReactElement;

                                                                                                property title

                                                                                                title?: string;

                                                                                                  property tokenSeparators

                                                                                                  tokenSeparators?: string[];

                                                                                                    property transitionName

                                                                                                    transitionName?: string;

                                                                                                      interface BaseSelectRef

                                                                                                      interface BaseSelectRef {}

                                                                                                        property blur

                                                                                                        blur: () => void;

                                                                                                          property focus

                                                                                                          focus: (options?: FocusOptions) => void;

                                                                                                            property nativeElement

                                                                                                            nativeElement: HTMLElement;

                                                                                                              property scrollTo

                                                                                                              scrollTo: ScrollTo;

                                                                                                                interface SelectProps

                                                                                                                interface SelectProps<
                                                                                                                ValueType = any,
                                                                                                                OptionType extends BaseOptionType = DefaultOptionType
                                                                                                                > extends BaseSelectPropsWithoutPrivate {}

                                                                                                                  property autoClearSearchValue

                                                                                                                  autoClearSearchValue?: boolean;

                                                                                                                    property backfill

                                                                                                                    backfill?: boolean;

                                                                                                                      property children

                                                                                                                      children?: React.ReactNode;

                                                                                                                        property defaultActiveFirstOption

                                                                                                                        defaultActiveFirstOption?: boolean;

                                                                                                                          property defaultValue

                                                                                                                          defaultValue?: ValueType | null;

                                                                                                                            property direction

                                                                                                                            direction?: 'ltr' | 'rtl';

                                                                                                                              property fieldNames

                                                                                                                              fieldNames?: FieldNames;

                                                                                                                                property filterOption

                                                                                                                                filterOption?: boolean | FilterFunc<OptionType>;
                                                                                                                                • In Select, false means do nothing. In TreeSelect, false will highlight match item. It's by design.

                                                                                                                                property filterSort

                                                                                                                                filterSort?: (
                                                                                                                                optionA: OptionType,
                                                                                                                                optionB: OptionType,
                                                                                                                                info: {
                                                                                                                                searchValue: string;
                                                                                                                                ) => number;

                                                                                                                                  property id

                                                                                                                                  id?: string;

                                                                                                                                    property inputValue

                                                                                                                                    inputValue?: string;
                                                                                                                                    • Deprecated

                                                                                                                                      Use searchValue instead

                                                                                                                                    property labelInValue

                                                                                                                                    labelInValue?: boolean;

                                                                                                                                      property labelRender

                                                                                                                                      labelRender?: (props: LabelInValueType) => React.ReactNode;

                                                                                                                                        property listHeight

                                                                                                                                        listHeight?: number;

                                                                                                                                          property listItemHeight

                                                                                                                                          listItemHeight?: number;

                                                                                                                                            property maxCount

                                                                                                                                            maxCount?: number;

                                                                                                                                              property menuItemSelectedIcon

                                                                                                                                              menuItemSelectedIcon?: RenderNode;

                                                                                                                                                property mode

                                                                                                                                                mode?: 'combobox' | 'multiple' | 'tags';

                                                                                                                                                  property onChange

                                                                                                                                                  onChange?: (value: ValueType, option: OptionType | OptionType[]) => void;

                                                                                                                                                    property onDeselect

                                                                                                                                                    onDeselect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;

                                                                                                                                                      property onSearch

                                                                                                                                                      onSearch?: (value: string) => void;

                                                                                                                                                        property onSelect

                                                                                                                                                        onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;

                                                                                                                                                          property optionFilterProp

                                                                                                                                                          optionFilterProp?: string;

                                                                                                                                                            property optionLabelProp

                                                                                                                                                            optionLabelProp?: string;

                                                                                                                                                              property optionRender

                                                                                                                                                              optionRender?: (
                                                                                                                                                              oriOption: FlattenOptionData<OptionType>,
                                                                                                                                                              info: {
                                                                                                                                                              index: number;
                                                                                                                                                              ) => React.ReactNode;

                                                                                                                                                                property options

                                                                                                                                                                options?: OptionType[];

                                                                                                                                                                  property prefixCls

                                                                                                                                                                  prefixCls?: string;

                                                                                                                                                                    property searchValue

                                                                                                                                                                    searchValue?: string;

                                                                                                                                                                      property value

                                                                                                                                                                      value?: ValueType | null;

                                                                                                                                                                        property virtual

                                                                                                                                                                        virtual?: boolean;

                                                                                                                                                                          Type Aliases

                                                                                                                                                                          type BaseSelectPropsWithoutPrivate

                                                                                                                                                                          type BaseSelectPropsWithoutPrivate = Omit<
                                                                                                                                                                          keyof BaseSelectPrivateProps

                                                                                                                                                                            Package Files (6)

                                                                                                                                                                            Dependencies (7)

                                                                                                                                                                            Dev Dependencies (23)

                                                                                                                                                                            Peer Dependencies (2)


                                                                                                                                                                            To add a badge like this onejsDocs.io badgeto 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/rc-select.

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