Material Components React Select
npm install @material/react-selectMDC React Select is component for MDC Select. Please see MDC Select.
``
npm install @material/react-select
with Sass:
`js`
import '@material/react-list/index.scss';
import '@material/react-menu-surface/index.scss';
import '@material/react-menu/index.scss';
import '@material/react-select/index.scss';
with CSS:
`js`
import '@material/react-list/dist/menu.css';
import '@material/react-menu-surface/dist/menu.css';
import '@material/react-menu/dist/menu.css';
import '@material/react-select/dist/select.css';
React Select requires at least one
`js
import React from 'react';
import Select, {Option} from '@material/react-select';
class MyApp extends React.Component {
state = {value: 'pomsky'};
render() {
return (
value={this.state.value}
onChange={(evt) => this.setState({value: evt.target.value})}
>
);
}
}
`
> NOTE: In order to get access to the value, you must add an onChange handler, which accepts an event and updates the value of the select as shown above.
#### Enhanced Select
React Select provides a Material styled select, instead of the default native drop down.
`js
import React from 'react';
import Select, {Option} from '@material/react-select';
class MyApp extends React.Component {
state = {value: 'pomsky'};
onEnhancedChange = (index, item) => (
this.setState({value: item.getAttribute('data-value')})
);
render() {
return (
label='Choose Dog'
value={this.state.value}
onEnhancedChange={this.onEnhancedChange}
>
);
}
}
`
#### Shorthand options
If the option elements do not require anything unique, you can omit passing this.props.children and set the options prop.
This options shorthand is most useful when your select options come in the form of JSON. Typically, when building a select, the options will be backed by an array of objects or strings (either from an API endpoint or a JSON File). If the label and value key names exist in the array of objects, you can run a map function over that array as shown below.
`js
import React from 'react';
import Select from '@material/react-select';
class MyApp extends React.Component {
state = {value: 'pomsky'};
render() {
const options = [{
label: 'Pomsky',
value: 'pomsky',
}, {
label: 'Golden Doodle',
value: 'goldenDoodle',
disabled: true,
}];
return (
onChange={(evt) => this.setState({value: evt.target.value})}
value={this.state.value}
options={options}
/>
);
}
}
`
> NOTE: If you want a floating label to act as a placeholder, you will need an empty option as documented in the MDC Web Select.
Prop Name | Type | Description
--- | --- | ---
children | Array{Element}/Element | Array of
The component is a provided component to be used for both the enhanced and native select.
#### Use with Native Select
When used in the native select, the accepts all the same props as the native tag.
`js`
#### Use with Enhanced Select
When used in the enhanced select, the ` component extends from MenuListItem. For your convience other auxilary components of menu are exported from select.
* OptionGroup (see MenuListGroup)
* OptionDivider (see MenuListDivider)
* OptionGroupSubheader (see MenuListGroup)
* OptionGraphic (see MenuListItemGraphic)
* OptionMeta (see MenuListItemMeta)
* OptionText (see MenuListText)
Sass mixins may be available to customize various aspects of the Components. Please refer to the
MDC Web repository for more information on what mixins are available, and how to use them.