React Column Select

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.