Popularity
0.8
Stable
Activity
0.0
Stable
14
1
2

Programming language: TypeScript
License: MIT License
Tags: UI Components     Select     Form Components    

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?

Add another 'Select' Library

README

React Column Select

NPM CI react-column-select DeepScan grade SIZE Depfu GitHub

Example

๐Ÿš€ 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.