OverviewOfficial Website

The "react-select" package is a popular open-source library for building flexible and customizable select input components in React applications. It provides a wide range of features and options to create dropdown menus, autocompletes, and other select-like UI elements with ease.

Add Package
yarn add react-select
Import Package
import Select from "react-select";
Remove Package
yarn remove react-select ( or you can remove package by removing specific package from package.json )
Examples:
Title React
Single Select 
const options = [
    { value: "Choice 1", label: "Choice 1" },
    { value: "Choice 2", label: "Choice 2" },
    { value: "Choice 3", label: "Choice 3" },
    { value: "Choice 4", label: "Choice 4" },
]

const [selectedGroup, setselectedGroup] = useState(null);

function handleSelectGroup(selectedGroup) {
    setselectedGroup(selectedGroup);
}
  
<Select
    value={selectedGroup}
    options={options}
    onChange={() => {
        handleSelectGroup();
    }}
/>
Default Multiple Select 
const options = [
    { value: "Choice 1", label: "Choice 1" },
    { value: "Choice 2", label: "Choice 2" },
    { value: "Choice 3", label: "Choice 3" },
    { value: "Choice 4", label: "Choice 4" },
]

const [selectedMulti, setselectedMulti] = useState(null);

function handleMulti(selectedMulti) {
    setselectedMulti(selectedMulti);
}

<Select
    value={selectedMulti}
    isMulti={true}
    onChange={() => {
      handleMulti();
    }}
    options={options}
/>
Ajax (remote data) 
 <Select
    value={selectedMulti2}
    onChange={() => {
        handleMulti2();
    }}
    options={options}
    className="select2-selection"
    isLoading={true}
/>
© Skote.