- Easily customize colors
- Responsive Design
- Styled with emotion
- Built with Typescript
yarn add react-column-select
# or
npm install 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}
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 |
leftHeader |
string | ✖ | 'Options' | the left column header |
rightHeader |
string | ✖ | 'Selected' | the right column header |
theme |
object | ✖ | {} | the color theme |
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: '#d6b1ff',
columnBorderColor: '#cfa4ff',
textColor: '#000000',
columnBgColor: '#CBD5E0',
buttonBgColor: '#CBD5E0',
}
Distributed under the MIT license. See LICENSE
for more information.