Popularity
0.5
Stable
Activity
0.0
Stable
2
1
1

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 SIZE Depfu GitHub

๐Ÿš€ Features

  • Easily customize colors
  • Responsive Design
  • Styled with emotion
  • Built with Typescript

โšก Installation

yarn add react-column-select
# or
npm install 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}
        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
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

๐ŸŽจ 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',
}

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.