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.

    Install

    npm i react-column-select

    DownloadsWeekly Downloads

    67

    Version

    1.5.0

    License

    MIT

    Unpacked Size

    114 kB

    Total Files

    23

    Last publish

    Collaborators

    • chr-ge