react-column-select
TypeScript icon, indicating that this package has built-in type declarations

1.5.0 • Public • Published

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.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.5.0
    84
    • latest

Version History

Package Sidebar

Install

npm i react-column-select

Weekly Downloads

95

Version

1.5.0

License

MIT

Unpacked Size

114 kB

Total Files

23

Last publish

Collaborators

  • chr-ge