Create MultiSelect in React

Multi-Select is a component used to get multiple inputs from user. Here we will create multiselect in react applications.

Create Checkbox in React

First, We needs to install Selectly package. You can get details of the selectly package here.

npm install selectly --save

Now, we can create CheckboxOption which we will use in our multi-select dropdown in react components.

const { Component, Children, PropTypes } = React
const { Select, Option, utils } = Selectly
const { getToggledOptions } = utils

class CheckboxOption extends Component {
  render() {
    const { value, isChecked, children } = this.props
    return (
      <Option className="react-select-option" value={value}>
        <input
          type="checkbox"
          className="react-select-option__checkbox"
          defaultValue={null}
          checked={isChecked}
        />
        <div className="react-select-option__label">
          {children}
        </div>
      </Option>
    )
  }
}

Creating MultiSelect Option in React

class CheckboxMultiSelect extends Component {
  constructor(props) {
    super(props)
    this.state = {
      defaultValue: 'Select a color',
      currentValues: []
    }
    this._handleChange = this._handleChange.bind(this)
  }

  _handleChange(value) {
    this.setState({
      currentValues: getToggledOptions(this.state.currentValues, value)
    })
  }

  render() {
    const { defaultValue, currentValues } = this.state

    return (
      <Select
        classPrefix="react-select"
        multiple
        onChange={this._handleChange}
      >
        <button className="react-select-trigger">
          { currentValues.length > 0
            ? currentValues.join(', ')
            : defaultValue
          }
        </button>
        <div className="react-select-menu">
          <ul className="react-select-options">
            <CheckboxOption value="php" isChecked={currentValues.indexOf('php') > -1}>
              PHP
            </CheckboxOption>
            <CheckboxOption value="react" isChecked={currentValues.indexOf('react') > -1}>
              React
            </CheckboxOption>
            <CheckboxOption value="wordpress" isChecked={currentValues.indexOf('wordpress') > -1}>
              WordPress
            </CheckboxOption>
          </ul>
        </div>
      </Select>
    )
  }
}

Now, we have react component <CheckboxMultiSelect /> which we can use in our react class or functional component to create multiSelect in React.

Styling MultiSelect Component in React

We can use this CSS to style our react multiselect component.

.react-select {
  display: inline-block;
  width: 100%;
  height: auto;
  position: relative;
}

.react-select-trigger {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 31px;
  padding: 6px 27px 6px 6px;
  font-size: 14px;
  text-align: left;
  border-radius: 3px;
  border: 1px solid #d3d4d4;
  outline: 0;
  cursor: pointer;
  position: relative;
  background: {
    color: #fff;
    image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="21px" height="21px" viewBox="0 0 21 21"><polygon points="10.5,12 7,8.5 14,8.5"/></svg>');
    repeat: no-repeat;
    position: calc(100% - 5px) center;
  }

  &, &:active {
    color: black;
  }

  &.react-select-enabled {
  }

  &.react-select-target-attached-top {
    border-radius: 0 0 3px 3px;
  }

  &.react-select-target-attached-bottom {
    border-radius: 3px 3px 0 0;
  }

  // truncate children with ellipsis
  * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.react-select-trigger__option {
  user-select: none;

  & + & {
    margin-left: 6px;
  }

  .react-select-trigger--multiple & {
    padding: 0 3px;
    border-radius: 2px;
    background: #E6F9FF;
  }
}

.react-select-trigger__arrow {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.react-select-menu {
  max-height: 180px;
  padding: 3px 0;
  border: 1px solid #e1e1e1;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 2px 4px 0 rgba(218, 221, 222, 0.35);
  background-color: white;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;

  .react-select-enabled & {
    pointer-events: auto;
  }

  .react-select-element-attached-top  & {
    margin-top: -1px;
    border-top: 0;
  }

  .react-select-element-attached-bottom  & {
    margin-top: 1px;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 -2px 4px 0 rgba(218, 221, 222, 0.35);
  }
}

.react-select-header {
  display: flex;
  padding: 8px;
  border-bottom: 1px solid #F1F3F5;
  border-top: 1px solid #F1F3F5;
}

.react-select-btn {
  flex: 1;
}

.react-select-options {
  padding: 0;
  margin: 0;
  list-style: none;
}

.react-select-option {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  font-size: 14px;
  text-indent: 4px;
  border-radius: 2px;
  cursor: pointer;
  user-select: none;

  &:hover {
    background: #FBFBFB;
  }
}

.react-select-option__label {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.react-select-optgroup {
  display: block;
  padding: 3px 0;
  cursor: default;
  border-top: 1px solid #F1F3F5;

  &:first-child {
    border: 0;
  }
}

.react-select-optgroup__title {
  display: block;
  padding: 8px 12px 6px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #909294;
  user-select: none;
}


// Pen Specific
* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  padding: 24px;
}

#app {
  width: 300px;
  margin: 0 auto;
}