react-dropdown-simple-use is a simple dropdown menu with style customizable
- Built-in and configurable:
- Filtering
- Style Customizable
npm install --save react-dropdown-simple-use import { Dropdown } from 'react-dropdown-simple-use'const data = [
{
label: "opt 1",
value: '1',
default:true // optional
},
{
label: "opt 2",
value: '2',
},
{
label: "opt 3",
value: '3',
},
{
label: "opt 4",
value: '4',
}
]<Dropdown data ={data} />.my_container_classname{
width:200px;
}const myCustomStyles = {
container: "my_container_classname",
header: "my_header_classname",
header_search: "my_search_classname",
header_input: "my_input_classname",
header_label: "my_label_classname",
header_arrow: {
size:'12px',
color:"black"
},
options: "my_options_classname",
option:"my_option_classname"
}
<Dropdown data ={data} menuCustomStyles={myCustomStyles} /><Dropdown data ={data} nameInput={nameInput} menuCustomStyles={menuCustomStyles} arrow/>| prop | type | value | Description |
|---|---|---|---|
| data | array | required | data |
| nameInput | string | optional | name of the <input>element |
| menuCustomStyles | object | optional | to customizie style by adding new class style to an element |
| arrow | boolean | optional | to show or hidden the arrow |