React Column Select
🚀 Features
- Easily customize colors
- Responsive Design
- Styled with emotion
- Built with Typescript
⚡ Installation
yarn add react-column-select
# or
npm i react-column-select
🏁 Getting Started
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>
)
}
⚙️ Props
| 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 |
🎨 Theme Customization
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',
}
🏷️ Label Customization
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',
}License
Distributed under the MIT license. See LICENSE for more information.
