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;
}
Please like share subscribe and give positive feedback to motivate me to write more for you.
For more tutorials please visit my website.
Thanks:)
Happy Coding:)
Top comments (0)