React-material-select NPM

React Material Select

I just wanted to have React select element in the Material Design. So I did it.

Installation

$ npm i react-material-select --save

Examples

http://react-material-select.netlify.com/

Documentation

All parameters:

<ReactMaterialSelect ...>

parameter	description	is required
onChange	callback function (function)	no
defaultValue	start value. One of dataValue keys. Default: null (string)	no
label	label for select. Default: null (string)	no
resetLabel	label for reset select value. Default: 'No value' (string) it also can be boolean value "false"	no

<option ...>

parameter	description	is required
dataValue	selected value (string)	yes

All methods

method	description
this.getValue()	get selected value
this.getLabel()	get selected label
this.handleToggleSelect()	open / close selector
this.handleResetSelect()	reset selector value and label
this.handleSetSelect(label, value)	set specified value and label to selector
this.getOptions()	get all available options as an array of objects

Basic Usage:

It should looks like below:

import React, {Component} from 'react'
import ReactMaterialSelect from 'react-material-select'
import 'react-material-select/lib/css/reactMaterialSelect.css'

class Example extends Component {
    render() {
        return (
            <ReactMaterialSelect>
                <option dataValue="Star Wars">Darth Vader</option>
                ...
            </ReactMaterialSelect>
        )
    }
}

Get value and label from refs

import React, {Component} from 'react'
import ReactMaterialSelect from 'react-material-select'
import 'react-material-select/lib/css/reactMaterialSelect.css'

getValue() {
    this.setState({
        selected1: {
            value: this.refs.firstselect.getValue(),
            label: this.refs.firstselect.getLabel(),
        },
    })
}

class Example extends Component {
    render() {
        return (
            <ReactMaterialSelect ref="firstselect">
                <option dataValue="Star Wars">Darth Vader</option>
                ...
            </ReactMaterialSelect>
            <button onClick={this.getValue.bind(this)}>Get value and label from select</button>
        )
    }
}

Get value from callback function (with all props)

import React, {Component} from 'react'
import ReactMaterialSelect from 'react-material-select'
import 'react-material-select/lib/css/reactMaterialSelect.css'

constructor() {
    super()

    this.state = {
        object: {},
    }

    this.callbackFunction = this.callbackFunction.bind(this)
}

callbackFunction(selected) {
    this.setState({object: selected})
}

class Example extends Component {
    render() {
        return (
            <ReactMaterialSelect label="Choose favourite film character" defaultValue="The Godfather" resetLabel="None of them" onChange={this.callbackFunction}>
                <option dataValue="The Godfather">Vito Corleone</option>
                ...
            </ReactMaterialSelect>
        )
    }
}