Skip to content

chr-ge/react-column-select

develop
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
October 16, 2021 04:57
src
April 30, 2022 13:24
April 30, 2022 13:24
April 28, 2021 23:24
April 16, 2021 22:57
April 9, 2021 15:55
April 14, 2021 14:01
April 30, 2022 13:24
April 28, 2021 23:24
April 28, 2021 23:24

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.