Popularity
0.8
Stable
Activity
0.0
Stable
14
1
2
Programming language: TypeScript
License: MIT License
react-column-select alternatives and similar libraries
Based on the "Select" category.
Alternatively, view react-column-select alternatives based on common mentions on social networks and blogs.
Do you think we are missing an alternative of react-column-select or a related project?
README
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 HobbiesSelect = () => {
const [selected, setSelected] = useState([])
const hobbies = [
{ value: '1', label: 'Hockey' },
{ value: '2', label: 'Painting' },
{ value: '3', label: 'Singing' },
]
const onChange = (values) => {
setSelected(values)
}
return (
<div>
<h2>Select Your Hobbies</h2>
<ColumnSelect
options={hobbies}
onChange={onChange}
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 |
leftHeader |
string | โ | 'Options' | the left column header |
rightHeader |
string | โ | 'Selected' | the right column headers |
isSearchable |
boolean | โ | false | enables searching |
searchPlaceholder |
string | โ | 'Search ...' | the placeholder string for the search inputs |
theme |
object | โ | {} | the color theme |
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: '#d6b1ff',
columnBorderColor: '#cfa4ff',
textColor: '#000000',
columnBgColor: '#CBD5E0',
buttonBgColor: '#CBD5E0',
optionSelectedBgColor: '#EDF2F7',
optionHoverBgColor: '#FAFBFC',
searchFocusBorderColor: '#805Ad5',
}
License
Distributed under the MIT license. See LICENSE
for more information.
*Note that all licence references and agreements mentioned in the react-column-select README section above
are relevant to that project's source code only.