bt-react-select v1.0.3

Select Component

Overview

The Select component is a versatile dropdown component for React applications. It supports various features such as search, chip list selection, and custom icons.

Live Demo

Installation

To use the Select component, ensure you have the necessary dependencies installed:

npm install react react-dom react-icons

Usage

Basic Usage

import Select from "./components/select";
import { DUMMY_OPTIONS } from "./data/dummy";

const handleSelectChange = (value: string) => {
  console.log("Selected value: ", value);
};

<Select
  label="Team member"
  placeholder="Select team member"
  options={DUMMY_OPTIONS}
  onChange={handleSelectChange}
/>;

With Icons

import { FaRegUser } from "react-icons/fa6";

<Select
  showItemIcon
  label="Team member"
  placeholder="Select team member"
  options={DUMMY_OPTIONS}
  icon={<FaRegUser />}
  onChange={handleSelectChange}
/>;

Searchable Select

import { CiSearch } from "react-icons/ci";

<Select
  variant="search"
  label="Team member"
  placeholder="Select team member"
  options={DUMMY_OPTIONS}
  icon={<CiSearch />}
  onChange={handleSelectChange}
/>;

Chip List Select

<Select
  showItemIcon
  label="Team member"
  placeholder="Select team member"
  options={DUMMY_OPTIONS}
  onChange={handleSelectChange}
  variant="chipList"
/>

Props

SelectProps

Option

SelectVariant

License

This project is licensed under the MIT License.