material-ui-dropdown v0.1.0
Material UI Dropdownlist
A @material-ui helper to cut off the whole boilerplate to work with select component from @material-ui.
Getting started
Install material-ui-dropdownlist
npm install material-ui-dropdownlistoryarn add material-ui-dropdowlist
Import material-ui-dropdowlist into your application
import MuiDropdownList from "material-ui-dropdowlist";
Setting up the dropdown
<MuiDropdownList
defaultText="Select item..."
options={persons}
placeholder="Persons"
optionText="name"
optionValue="id"
value={this.state.value}
onChange={this.handleChange}
showError={this.state.showError}
errorText={this.state.errorText}
/>
defaultText: Text that will appear as default option (empty value)
options: Array of available options
- Options should be an object with properties to be used as option text and option value
placeholder: Dropdown's placeholder
optionText: String - Property from the object in options that you want to be displayed
optionValue: String - Property from the object in options that you want to be the value (normally the object ID)
value: String - Selected item
onChange: Function - Callback you want to executed when an item is selected.
- Returns the selected object
showError: Boolean - Change dropdown's color to red, indicating error.
errorText: String - Error message you want to display
In addition you can use all properties from Material TextField to customize your dropdown
P.S.: This dropdown does not accept multiple selection (maybe in the future)
7 years ago