React dropdown selector

This is the simplest dropdown selector which provides grouping and multiple selection.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Installing

What you need to do

git clone https://github.com/smivv/react-dropdown
npm install
npm start

Screenshots

Select Box Example

Multiple Select Box Example

Select Box Example with Separated Groups

Multiple Select Box Example with Separated Groups

Usage Example

Code could be found in src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import SelectBox from './lib/select-box';

export default class Example extends React.Component{

    state = {
        color: null,
        colors: [],
        color2: null,
        colors2: []
    };

    handleChange(color) {
        this.setState({ color: color })
    };
    handleMultiChange(colors) {
        this.setState({ colors: colors })
    };

    handleChange2(color) {
        this.setState({ color2: color })
    };
    handleMultiChange2(colors) {
        this.setState({ colors2: colors })
    };
    render() {
        return (
            <div className="example">
                <h1>Select Box Example</h1>
                <SelectBox label="Favorite Color"
                           className="my-example-select-box"
                           onChange={(e) => this.handleChange(e)}
                           value={this.state.color}>
                    <option value="">No selected</option>
                    <option value="red" radioGroup="Colors">Red</option>
                    <option value="dark" radioGroup="Shades">Dark</option>
                    <option value="blue" radioGroup="Colors">Blue</option>
                    <option value="black" radioGroup="Colors">Black</option>
                    <option value="light" radioGroup="Shades">Light</option>
                </SelectBox>
                <h1>Multiple Select Box Example</h1>
                <SelectBox label="Favorite Color"
                           className="my-example-select-box"
                           multiple="true"
                           onChange={(e) => this.handleMultiChange(e)}
                           value={this.state.colors}>
                    <option value="">No selected</option>
                    <option value="red" radioGroup="Colors">Red</option>
                    <option value="dark" radioGroup="Shades">Dark</option>
                    <option value="blue" radioGroup="Colors">Blue</option>
                    <option value="black" radioGroup="Colors">Black</option>
                    <option value="light" radioGroup="Shades">Light</option>
                </SelectBox>
                <h1>Select Box Example with Separated Groups</h1>
                <SelectBox label="Favorite Color"
                           className="my-example-select-box"
                           separatedGroups="true"
                           onChange={(e) => this.handleChange2(e)}
                           value={this.state.color2}>
                    <option value="">No selected</option>
                    <option value="red" radioGroup="Colors">Red</option>
                    <option value="dark" radioGroup="Shades">Dark</option>
                    <option value="blue" radioGroup="Colors">Blue</option>
                    <option value="black" radioGroup="Colors">Black</option>
                    <option value="light" radioGroup="Shades">Light</option>
                </SelectBox>
                <h1>Multiple Select Box Example with Separated Groups</h1>
                <SelectBox label="Favorite Color"
                           className="my-example-select-box"
                           multiple="true"
                           separatedGroups="true"
                           onChange={(e) => this.handleMultiChange2(e)}
                           value={this.state.colors2}>
                    <option value="">No selected</option>
                    <option value="red" radioGroup="Colors">Red</option>
                    <option value="dark" radioGroup="Shades">Dark</option>
                    <option value="blue" radioGroup="Colors">Blue</option>
                    <option value="black" radioGroup="Colors">Black</option>
                    <option value="light" radioGroup="Shades">Light</option>
                </SelectBox>
            </div>
        );
    };
}

ReactDOM.render(<Example />, document.getElementById('root'));

Built With

• React - The web framework used

Authors

• Vladimir Smirnov - Initial work - smivv

License

This project is licensed under the MIT License - see the LICENSE.md file for details