React Select — Advanced Options

Photo by Davide Cantelli on Unsplash

React Select is a dropdown menu library for React apps.

It supports many things that aren’t supported by regular dropdowns.

In this article, we’ll look at how to add menus with React Select.

Dropdown with Creatable Choices

We can create a dropdown with creatable choices by using the CreatableSelect component.

For instance, we can write:

import React from "react";
import CreatableSelect from "react-select/creatable";
const options = [
  { value: "apple", label: "Apple" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" }
];
export default function App() {
  const handleChange = (newValue, actionMeta) => {
    console.log(newValue);
    console.log(`action: ${actionMeta.action}`);
  };
  const handleInputChange = (inputValue, actionMeta) => {
    console.log(inputValue);
    console.log(`action: ${actionMeta.action}`);
  };
  return (
    <div>
      <CreatableSelect
        isClearable
        onChange={handleChange}
        onInputChange={handleInputChange}
        options={options}
      />
    </div>
  );
}

to create a dropdown with creatable choices.