Package Exports
- react-kiwi-dropdown
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-kiwi-dropdown) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-kiwi-dropdown
A minimal, easy-to-use and highly adjustable dropdown component made with React and styled-components.
Props
There's only two required props, options and onChange.
| Name | Type | Description |
|---|---|---|
| options | array | An array containing option objects* |
| selectedOption | string | The currently selected value |
| onChange | function | Function to call on change |
| buttonLabel | string | Button text |
| buttonIndicator | boolean | Show selected indicator on button |
| buttonArrow | 'single' or 'double' | Arrow style, single or double |
| selectedOptionIcon | any | Custom icon for selected option |
Option object
| Name | Type | Description | Required |
|---|---|---|---|
| value | string | Option value | required |
| content | any | Content to display | required |
| icon | any | Any component |
Styling
The dropdown can easily be styled by extending the component with styled-components styled() function. Use predefined ids and classNames to add style to specific components.
| id/className | Description | Selected className |
|---|---|---|
| #button | Button to toggle options | |
| .button-indicator | any | &.selected |
| #option-list | Option list | |
| .option | Option | &.selected |
Example
const StyledDropdown = styled(Dropdown)`
#button {
background: red;
}
.button-indicator {
background: green;
&.selected {
background: pink;
}
}
#option-list {
background: yellowgreen;
padding: 5px;
}
.option {
background: lightcoral;
&.selected {
background: blue;
}
}
`