@super-effective/react-dropdown-input

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 color Default: #cdcdcf
borderWidth?	number|string	The border width Default: 1
borderRadius?	number|string	The border radius Default: 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 list Default: 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 selected Default: " "
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