react-dropdown-input

A React Dropdown Input (Select)

Install

NPM:

npm install @super-effective/react-dropdown-input

Yarn:

yarn add @super-effective/react-dropdown-input

Usage

Import the component:

import ReactDropdownInput from '@super-effective/react-dropdown-input';

Render the component in your code:

const options = [
  { id: 'test1', content: <span>test1</span> },
  { id: 'test2', content: <span>test2</span> },
];
<ReactDropdownInput options={options} onItemSelected={onItemSelected} selectedItemId="test1" />

Props

|Prop|Type|Details| |----|----|-------| |borderColor?|string|The border colorDefault: #cdcdcf| |borderWidth?|number\|string|The border widthDefault: 1| |borderRadius?|number\|string|The border radiusDefault: 4| |borderStyle?|string|The border style (e.g. solid, dashed, etc.)Default: solid| |dropDownClassName?|string|The className to apply to the dropdown| |dropDownStyle?|React.CSSProperties|The styles to apply to the dropdown| |excludeSelectedOption?|boolean|Exclude the selected option from the listDefault: false| |fluid?|boolean|Display the dropdown as a fluid item (no division between the value and the dropdown)Default: false |options|DropdownInputOption[]|The array options { id: string; content: ReactNode; }| |padding?|number|Padding - applies to the drop down itself and its items| |paddingHorizontal?|number|Horizontal padding - applies to the drop down itself and its items (overrides padding)Default: 12| |paddingVertical?|number|Vertical padding - applies to the drop down itself and its items (overrides padding)Default: 8| |placeholder?|ReactNode|The content to display when no option is selectedDefault: " "| |selectedOptionClassName|string|The className to apply to the selected option| |toggleIcon|ReactNode|The element to display as the toggle icon| |value|string|The id of the selected option| |onChange|(id: string) => void|The callback function to be called when the selected option changes|