diff --git a/types/react-select/index.d.ts b/types/react-select/index.d.ts index 084f878618..d256bb437e 100644 --- a/types/react-select/index.d.ts +++ b/types/react-select/index.d.ts @@ -130,6 +130,67 @@ export interface MenuRendererProps { valueArray: Options; } +export interface OptionComponentProps { + /** + * Classname(s) to apply to the option component. + */ + className?: string; + + /** + * Currently focused option. + */ + focusOption?: Option; + + inputValue?: string; + instancePrefix?: string; + + /** + * True if this option is disabled. + */ + isDisabled?: boolean; + + /** + * True if this option is focused. + */ + isFocused?: boolean; + + /** + * True if this option is selected. + */ + isSelected?: boolean; + + /** + * Callback to be invoked when this option is focused. + */ + onFocus?: (option: Option, event: any) => void; + + /** + * Callback to be invoked when this option is selected. + */ + onSelect?: (option: Option, event: any) => void; + + /** + * Option to be rendered by this component. + */ + option: Option; + + /** + * Index of the option being rendered in the list + */ + optionIndex?: number; + + /** + * Callback to invoke when removing an option from a multi-selection. (Not necessarily the one + * being rendered) + */ + removeValue?: (value: TValue | TValue[]) => void; + + /** + * Callback to invoke to select an option. (Not necessarily the one being rendered) + */ + selectValue?: (value: TValue | TValue[]) => void; +} + export interface ArrowRendererProps { /** * Arrow mouse down event handler. @@ -388,7 +449,7 @@ export interface ReactSelectProps extends React.Props; + optionComponent?: React.ComponentType>; /** * function which returns a custom way to render the options in the menu */ diff --git a/types/react-select/react-select-tests.tsx b/types/react-select/react-select-tests.tsx index b048343555..3635fe3145 100644 --- a/types/react-select/react-select-tests.tsx +++ b/types/react-select/react-select-tests.tsx @@ -339,6 +339,16 @@ describe("Examples", () => { />; }); + it("Custom option component", () => { + class OptionComponent extends React.Component { + render() { + return
{this.props.option.label}
; + } + } + + ; + }); + it("Value render with custom value option", () => { const valueRenderer = (option: ReactSelectModule.Option): ReactSelectModule.HandlerRendererResult => null;