React Select Group

select column with double options for react js form

Demo

Install

npm install react-select-group

Usage

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