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 |