Select

A custom select component that supports searching with multi select

Installation

npm install --save @gladio/select

Usage

import Select from "@gladio/select"
function App () {
  return <Select value={null} options={["Apple", "Orange", "Mango"]} />
}

The select component provides a convenient and easy way to render a custom select with search and multi select functionality. The component also allows the async fetch for options to filter out the list.

Props

onChange

Listen to onChange of the selected value. This work in the similar way as the native select works.

type onChange = (value: null | string | object, name: string) => void

Custom option renderer

We can pass optionRenderer to the select component to render a custom component for options in the menu

Code Editor

function () {
  const [value, setValue] = useState(null)
  return <Select
  value={value}
  onChange={val => setValue(val)}
  options={[
    {id: 1, name: "Taj Hotel", stars: 5, location: "Jaipur"},
    {id: 2, name: "Udaan Hotel", stars: 4, location: "Ajmer"},
    {id: 3, name: "Udaan Hotel", stars: 2, location: "Jaipur"},
  ]}
  optionRenderer={({ option }) => <div>
    <div>{option.name}</div>
    <div className="-mt-1 text-sm text-gray-600">
      {option.location} •  {option.stars} Star
    </div>
  </div>}
  />
}

function () {
  const [value, setValue] = useState(null)
  return <Select
  value={value}
  onChange={val => setValue(val)}
  options={[
    {id: 1, name: "Taj Hotel", stars: 5, location: "Jaipur"},
    {id: 2, name: "Udaan Hotel", stars: 4, location: "Ajmer"},
    {id: 3, name: "Udaan Hotel", stars: 2, location: "Jaipur"},
  ]}
  optionRenderer={({ option }) => <div>
    <div>{option.name}</div>
    <div className="-mt-1 text-sm text-gray-600">
      {option.location} •  {option.stars} Star
    </div>
  </div>}
  />
}

Playground