0.1.2 • Published 3 years ago
react-any-dropdown v0.1.2
React Any Dropdown
Customizable dropdown with the option to multi-select!
Install
npm i -s react-any-dropdown
Usage
Being customizable, the dropdown will accept a number of props to change the look and function of your dropdown
| Prop | Type | Description | Default |
|---|---|---|---|
| borderWidth | number | The width of the border for the dropdown | 1px |
| borderColor | string (color) | The color of the border for the dropdown | #D9D9D9 |
| buttonColor | string (color) | background color of the button of the dropdown | white |
| contentBackgroundColor | string (color) | background color of the collapsed view (content) of the dropdown | white |
| maxContentHeight | number | maximum height of the collapsed view (content) of the dropdown | 100px |
| contentWidth | number | width of the collapsed view (content) of the dropdown | 300px |
| downArrowColor | string (color) | color of the arrow inside the dropdown button when collapsed (pointing downward) | #8C8C8C |
| upArrowColor | string (color) | color of the arrow inside the dropdown button when expanded (pointing upward) | #8C8C8C |
| selectedBackgroundColor | string (color) | color of the selected item or option in the dropdown | lightblue |
| selectedTextColor | string (color) | color of the text of the selected item or option in the dropdown as it shows in the dropdown button | #454545 |
| onSelect | function | any function you'd like the dropdown to do to the selected item once it is selected | |
| onUnSelect | function | (for multiselect) any function you'd like the dropdown to do to the selected item once it is unselected | |
| multiselect | boolean | if true, dropdown will be multiselected. Selected items will be joined with "," and can be passed on to other functions | false |
| placeholder | string | any placeholder that will display when no item is selected | "Select an item" |
| buttonWidth | number | width of the overall button for the dropdown | 150px |
Example
import React from 'react'
import Dropdown from 'react-any-dropdown'
import styles from './style'
const App = () => {
return (
<div style={styles.container}>
<Dropdown options={['test1', 'test2', 'test3']}/>
</div>
)
}
export default App