Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 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 (6 months ago)
- Last Synced: 2024-07-31T23:44:17.113Z (5 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.