react-bootstrap-selectbox

react-bootstrap-selectbox

A wrapper for react-select

Install

npm install --save react-bootstrap-selectbox

Usage

import React, { useState } from 'react'

import { SelectBox } from 'react-bootstrap-selectbox'
import 'react-bootstrap-selectbox/dist/index.css'

const SelectBoxExample = (props) => {

  const companies = [
    { company_name: "Facebook", company_id: "0" },
    { company_name: "Google",   company_id: "1" }
  ]

  const [company, setCompany] = useState(null);

  const handleSelection = (data, event) => {
    console.log(event.name) //company
    console.log(data)      // { label: "Google", value: "1" }
    setCompany(data)
  }

  return (
        <SelectBox
            name="company"
            onSelection={handleSelection}
            options={companies}
            bindLabel="company_name"       // pass your label key default key label
            bindValue="company_id"        // pass your value key default key value
            placeholder="Select Company" // default Select... - optional
            value={company}		// default null
            label="Company"	       // default '' - optional
        />
    )
}

export default SelectBoxExample;

import React, { useState } from 'react'

import { SelectBox } from 'react-bootstrap-selectbox'
import 'react-bootstrap-selectbox/dist/index.css'

const SelectBoxExample2 = (props) => {

  const companies = [
    { label: "Facebook", value: "0" },
    { label: "Google",   value: "1" }
  ]

  const [company, setCompany] = useState(null);

  const handleSelection = (data, event) => {
    console.log(event.name) //company
    console.log(data)      // { label: "Google", value: "1" }
    setCompany(data)
  }

  return (
        <SelectBox
            name="company"
            onSelection={handleSelection}
            options={companies}
            placeholder="Select Company"
            value={company}
            label="Company"
        />
    )
}
export default SelectBoxExample2;

Props

prop	Type	Default	Required	Description
name	string		yes
options	array		yes
bindLabel	string	label	no	No need to pass if options array having label key
bindValue	string	value	no	No need to pass if options array having value key
onSelection	event		yes	A event handler (data, event)
placeholder	string	Select...	no
isValid	boolean	true	no
isSearchable	boolean	true	no
isClearable	boolean	true	no
isMulti	boolean	false	no	For multiple Selection
value	`object	array`	null	no
label	string		no
errorMessage	string		no	If isValid is false then errorMessage is shown

License

MIT © https://github.com/ultimateakash