# react-select-group

> select column with double options

Latest version **1.0.8** (published 2022-10-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-select-group
pnpm add react-select-group
yarn add react-select-group
bun add react-select-group
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2022-10-27 |
| First published | 2022-10-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 3 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | faridho |
| Maintainers | faridho |

## Links

- npm: https://www.npmjs.com/package/react-select-group
- Repository: https://github.com/faridho/react-select-group
- Homepage: https://github.com/faridho/react-select-group#readme
- Issues: https://github.com/faridho/react-select-group/issues
- npm.io page: https://npm.io/package/react-select-group

## Dependencies (3)

- [postcss](https://npm.io/package/postcss.md) ^7.0.39
- [tailwindcss](https://npm.io/package/tailwindcss.md) npm:@tailwindcss/postcss7-compat@^2.2.17
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^9.8.8

## Recent versions

- 1.0.8 (latest) — 2022-10-27
- 1.0.5 — 2022-10-27
- 1.0.4 — 2022-10-27
- 1.0.3 — 2022-10-16
- 1.0.2 — 2022-10-13
- 1.0.1 — 2022-10-13
- 1.0.0 — 2022-10-13

## README

# React Select Group

select column with double options for react js form

[![NPM](https://img.shields.io/npm/v/react-select-group.svg)](https://www.npmjs.com/package/react-select-group) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Demo

![](https://github.com/faridho/react-select-group/blob/master/react-select-group.gif?raw=true)

## Install

```bash
npm install react-select-group
```

## Usage

```jsx
import React from 'react'
import { ReactSelectGroup } from 'react-select-group'
import 'react-select-group/dist/index.css'

const App = () => {
  const flags = [
    'https://res.cloudinary.com/duzt2dvg6/image/upload/v1665326782/flags/gmail.png',
    'https://res.cloudinary.com/duzt2dvg6/image/upload/v1665326789/flags/outlook.png',
    'https://res.cloudinary.com/duzt2dvg6/image/upload/v1665326776/flags/apple.png',
    'https://res.cloudinary.com/duzt2dvg6/image/upload/v1665326799/flags/yahoo.png'
  ]
  const labels = [
    'Gmail', 'Outlook', 'Apple Mail', 'Yahoo Mail'
  ]
  render() {
    const onChangeValue = (data) => {
      // your logic
    }
    return (
      <ReactSelectGroup 
        placeholder='Type email here'
        isError={error}
        flags={flags}
        labels={labels}
        onChange={onChangeValue} 
      />
    )
  }
}

export default App
```

## Props

| Props         |    Type    | Desription                                                                                                                        |
| ------------- | :--------: | --------------------------------------------------------------------------------------------------------------------------------- |
| `placeholder` |  `string`  | Placeholder input type on text box                                                                                                |
| `isError`     | `boolean`  | Handle custom error. Default is false                                                                                             |
| `flags`       |  `array`   | Element must image url. Because of show flags on group one or left column                                                         |
| `labels`      |  `array`   | This is optional. But, if you want describe each flag you can use it. And length of labels array should same with length of flags |
| `onChange`    | `function` | Emit every value to parent. Should print paramater to get result                                                                  |

## License

MIT © [faridho](https://github.com/faridho)

---
_Source: https://npm.io/package/react-select-group · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._