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;

Properties

  isSearchable -  true (default)
  isClearable  -  true (default)
  isMulti      -  false (default) // for multiple selection

License

MIT © https://github.com/ultimateakash