No Password Management


    0.5.0 • Public • Published


    Build custom select menus in React. Provides a low level way to build the select menu you need.


    npm install selectly --save

    bower install selectly --save

    Example Usage

    import { Select, Trigger, OptionList, Option, utils } from 'Selectly'
    const { getToggledValues } = utils
    class MultiSelect extends Component {
      constructor(props) {
        this.state = {
          defaultValue: 'Select a color',
          currentValues: []
      _handleChange(value) {
          currentValues: getToggledValues(this.state.currentValues, value)
      render() {
        const { defaultValue, currentValues } = this.state
        return (
            onChange={value => this._handleChange(value)}
              { currentValues.length > 0
                ? currentValues.join('')
                : defaultValue
            <OptionList tag="ul" className="react-select-menu">
              <Option value="red">Red</Option>
              <Option value="green">Green</Option>
              <Option value="blue">Blue</Option>

    Select Props

    children: PropTypes.node.isRequired (Accepts 2 children)

    The first child is used as the trigger and the second child is used as the options that will be displayed upon clicking the trigger.

    multiple: PropTypes.bool

    When true this allows multiple options to be selected.

    disabled: PropTypes.bool

    Puts the select menu in a disabled state.

    autoWidth: PropTypes.bool

    Determines if the options should be the same width as the trigger.

    onChange: PropTypes.func

    Callback when an option has been selected. Passes back the value that was selected.

    React ARIA Components

    Trigger, OptionList, and Option are exported directly from React ARIA


    buildOptionsLookup: (array options)

    Returns a flat object to allow optgroup options to be accessed easier.

      { label: 'Dogs', optgroup: [
        { value: 'frenchy', label: 'French Bulldog' },
        { value: 'pit-bull', label: 'Pit Bull' }
      { label: 'Cats', optgroup: [
        { value: 'munchkin', label: 'Munchkin' },
        { value: 'persian', label: 'Persian' }

    turns into

      'frenchy':  { value: 'frenchy', label: 'French Bulldog' },
      'pit-bull': { value: 'pit-bull', label: 'Pit Bull' },
      'munchkin': { value: 'munchkin', label: 'Munchkin' },
      'persian':  { value: 'persian', label: 'Persian' }

    getAllValues: (object options)

    Returns an array of all option values.

    getToggledValues: (object prevValues, [array, string] nextValues)

    Returns a new array of values either added or removed.

    getCurrentOptions: (object options, [array, string] currentValue)

    Returns an array of the current option or options.

    isOptionSelected: ([array, string] currentValue, string value)

    Determines if value exists in or matches currentValue. Returns true or false.

    Run Example

    clone repo

    git clone

    move into folder

    cd ~/selectly

    install dependencies

    npm install

    run dev mode

    npm run dev

    open your browser and visit: http://localhost:8080/


    npm i selectly

    DownloadsWeekly Downloads






    Last publish


    • souporserious