react-column-select

React component to select options by transferring them from one column to another.


Keywords
react, react-component, select, multiselect, react select, column select, react column select, ui, form, input, transfer, column-select, typescript
License
MIT
Install
npm install react-column-select@0.0.1

Documentation

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 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.