Skip to main content

Dropdown Menu

v.2.0.3

Installation​

yarn add @mercell/dropdown-react

Usage​

Dropdown component is based on common react library called React-Select. All props which are possible inside React-Select can be applied inside <Dropdown/> component.

We strongly recommend to take a look at React-Select documentation.

It supports virtualization for 100+ elements inside the list and also multiselect case if user will need to select more than one thing from the list.

import { Dropdown } from '@mercell/dropdown-react';
Live Editor
Result

Types, definitions, etc.​

DropdownProps
interface DropdownMenuProps {
     invalid?: boolean;
    sizeToEnterVirtualization?: number;
    innerPropsOfValueTag?: JSX.IntrinsicElements['div'] & Record<string, string>;
} & Omit<StateManagerProps, 'components'>
NameTypeDefaultRequiredDescription
invalidboolean-noChanging style to indicate error inside dropdown
sizeToEnterVirtualizationnumber100noNumber where dropdown start virtualization instead of normal render for better performance
innerPropsOfValueTagJSX.IntrinsicElements['div'] & Record<string, string>-noPossibility to pass Div properties to the value tag in selected dropdown state
Rest of the React-Select propsStateManagerProps-noAll possible properties based on the React-Select documentation, e.g. isMulti, isClearable, hideSelectedOptions, options etc.