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 ReactJS.
Why?
Styling <select> and <option> elements is a hassle when creating a custom dropdown. Many UI component libraries have great dropdown components but these are often heavily styled and not easy to overwrite. react-kiwi-dropdown is an easy to use dropdown component which makes overwriting default styles a breeze.
Props
There's only two required props, options and onChange.
| Name | Type | Description |
|---|---|---|
| options | array | An array containing option objects |
| selectedOption | string / array of strings | The currently selected value/values |
| resetValue | any | Used to reset select with button indicator |
| onChange | function | Function to call on change |
| buttonLabel | string | Button label |
| buttonIndicator | boolean | Show button indicator |
| buttonIndicatorContent | any | Custom content inside button indicator |
| 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 |
|---|---|---|
| #KIWI-button | Button to toggle options | |
| .KIWI-button-indicator | Button indicator | .selected |
| #KIWI-option-list | Option list | |
| .KIWI-option | Option | .selected |
Default style
react-kiwi-dropdown comes with a miniminimalistic design and few lines of css.
#KIWI-button {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 40px;
padding: 8px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
font-size: 14px;
}
#KIWI-button:focus {
outline: none;
}
.KIWI-button-indicator {
display: inline-block;
min-height: 16px;
min-width: 16px;
border: 1px solid rgba(0, 0, 0, 0.25);
margin-right: 7.5px;
}
#KIWI-option-list {
position: absolute;
list-style: none;
margin: 0;
padding: 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.KIWI-option {
display: flex;
align-items: center;
width: 100%;
padding: 8px;
background: #fff;
border: none;
position: relative;
font-size: 12px;
}
.option:hover {
text-shadow: 0 0 0.65px #333, 0 0 0.65px #333;
}
.option .selected {
text-shadow: 0 0 0.65px #333, 0 0 0.65px #333;
}Extending styles
Styles can easily be extended by either overwriting the predefined ids and classes or by using the styled() function from styled-components.
styled-components example
const StyledDropdown = styled(Dropdown)`
#KIWI-button {
background: red;
}
.KIWI-button-indicator {
background: green;
&.selected {
background: pink;
}
}
#KIWI-option-list {
background: yellowgreen;
padding: 5px;
}
.KIWI-option {
background: lightcoral;
&.selected {
background: blue;
}
}
`