Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/chr-ge/react-column-select

React component to select options by transferring them from one column to another.
https://github.com/chr-ge/react-column-select

column-select react react-component select typescript

Last synced: 4 months ago
JSON representation

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

Host: GitHub
URL: https://github.com/chr-ge/react-column-select
Owner: chr-ge
License: mit
Created: 2021-04-09T17:11:27.000Z (almost 4 years ago)
Default Branch: develop
Last Pushed: 2024-07-31T05:38:17.000Z (7 months ago)
Last Synced: 2024-07-31T23:44:17.113Z (7 months ago)
Topics: column-select, react, react-component, select, typescript
Language: TypeScript
Homepage: https://react-column-select.chr-ge.com
Size: 5.75 MB
Stars: 14
Watchers: 1
Forks: 2
Open Issues: 7
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

awesome-react-components - react-column-select - A column select component built for react. (UI Components / Form Components)
awesome-react - react-column-select - A column select component built for react. ![](https://img.shields.io/github/stars/chr-ge/react-column-select.svg?style=social&label=Star) (UI Components / Form Components)
awesome-react-components - react-column-select - A column select component built for react. (UI Components / Form Components)
fucking-awesome-react-components - react-column-select - A column select component built for react. (UI Components / Form Components)
awesome-react-components - react-column-select - A column select component built for react. (UI Components / Form Components)
awesome-react-components - react-column-select - A column select component built for react. (UI Components / Form Components)

README

        # React Column Select

[![NPM](https://badgen.net/npm/v/react-column-select)](https://www.npmjs.com/package/react-column-select)

[![CI](https://github.com/chr-ge/react-column-select/actions/workflows/ci.yml/badge.svg?branch=develop)](https://github.com/chr-ge/react-column-select/actions/workflows/ci.yml)

[![react-column-select](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/p3czr7/develop&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/p3czr7/runs)

[![DeepScan grade](https://deepscan.io/api/teams/14351/projects/17471/branches/400913/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=14351&pid=17471&bid=400913)

[![SIZE](https://badgen.net/bundlephobia/min/react-column-select)](https://bundlephobia.com/result?p=react-column-select)

[![Depfu](https://badges.depfu.com/badges/c540bb2dbd4e634a557231ecd335474e/overview.svg)](https://depfu.com/repos/github/chr-ge/react-column-select?project_id=24188)

![GitHub](https://img.shields.io/github/license/chr-ge/react-column-select)

[Example](https://react-column-select.chr-ge.com/?path=/story/example-column-select--default)

## 🚀 Features

- Easily customize colors

- Responsive Design

- Styled with emotion

- Built with Typescript

## ⚡ Installation

```sh

yarn add react-column-select

# or

npm i react-column-select

```

## 🏁 Getting Started

```jsx

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 (

    


      Select Your Hobbies

      

    

  )

}

```

## ⚙️ 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:

```jsx

{

    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:

```jsx

{

    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.