@super-effective/react-dropdown-input NPM

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

react component dropdown input select

@everything-registry/sub-chunk-882

2.0.0

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago