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' 

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"
            onChange={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 
        />
    )
}

export default SelectBoxExample;

import React, { useState } from 'react'

import { SelectBox } from 'react-bootstrap-selectbox' 

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"
            onChange={handleSelection}
            options={companies}
            placeholder="Select Company"
            value={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
onChange	event		yes	A event handler (data, event)
placeholder	string	Select...	no
isSearchable	boolean	true	no
isClearable	boolean	true	no
isMulti	boolean	false	no	For multiple Selection
value	object OR array	null	no

License

MIT © https://github.com/ultimateakash