yarn add react-column-select # or npm i react-column-select
import React, { useState } from 'react'
import ColumnSelect from 'react-column-select'
const hobbies = [
{ value: '1', label: 'Hockey' },
{ value: '2', label: 'Painting' },
{ value: '3', label: 'Singing' },
]
const HobbiesSelect = () => {
const [selected, setSelected] = useState([])
const onChange = (values) => {
setSelected(values)
}
return (
<div>
<h2>Select Your Hobbies</h2>
<ColumnSelect
options={hobbies}
onChange={onChange}
labels={{
leftHeader: 'Available Hobbies',
rightHeader: 'Selected Hobbies',
}}
/>
</div>
)
} name type isRequired default description options array ✔ N/A available select options onChange function ✔ N/A function called when selected values change defaultValue array ✖ [] set the initial selected values max number ✖ N/A set the max number of options that can be selected labels object ✖ see below the labels for the headers, buttons & search input theme object ✖ see below the color theme isSearchable boolean ✖ false enables searching disableAllButtons boolean ✖ false disable the "Add All" and "Remove All" buttons disableDoubleClick boolean ✖ false disable double click to add/remove an option disableKeyboard boolean ✖ false disable navigation the select options with keyboard
Below is the default theme. Change the values that you want to customize:
{
headerBgColor: '#d1d5db',
columnBorderColor: '#9ca3af',
textColor: '#000000',
columnBgColor: '#CBD5E0',
buttonBgColor: '#CBD5E0',
optionSelectedBgColor: '#EDF2F7',
optionHoverBgColor: '#FAFBFC',
searchFocusBorderColor: '#06b6d4',
}
Below are the default labels. Change the values that you want to customize:
{
leftHeader: 'Options',
rightHeader: 'Selected',
searchPlaceholder: 'Search ...',
add: 'Add',
addAll: 'Add All',
remove: 'Remove',
removeAll: 'Remove All',
}
Distributed under the MIT license. See LICENSE for more information.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4