How to Create Select with react-select

Introduction

Select dropdown menus are commonly used in web applications to provide users with a list of selectable options.

In this article, we will explore how to create a select using the react-select library.

By leveraging react-select, we can take advantage of its extensive feature set, and so we don't end up creating an inferior version of this library.

Prerequisites

Before proceeding with this tutorial, ensure that you have the following dependencies installed:

• React npx create-react-app
• react-select npm i --save react-select

Styling up the Select

To begin, let's create a custom styles for our select. Create a file and check out the following code:

export const customStyles = {

  option: (defaultStyles: any, state: { isSelected: boolean }) => ({
    ...defaultStyles,
    color: "#101828",
    cursor: "pointer",
    backgroundColor: state.isSelected ? `#ccc` : "#fff",
  }),

  control: (defaultStyles: any, state: { isFocused: boolean }) => ({
    ...defaultStyles,
    background: "white",
    borderRadius: "0.5rem",
    borderColor: state.isFocused ? "#D6BBFB" : "#D0D5DD",


    "&:hover": {
      borderColor: null,
    },
  }),

  menu: (defaultStyles: any) => ({
    ...defaultStyles,
    boxShadow:
      "0px 12px 16px -4px rgba(16, 24, 40, 0.1), 0px 4px 6px -2px rgba(16, 24, 40, 0.05)",
  }),


};

Defining Select Options

Next, let's define the options for our select dropdown menu. Create a file name, I just called it select-data.ts and include the following code:

export const options = [
  { value: "Sleeping", label: "Sleeping" },
  { value: "Ride a banana boat", label: "Ride a banana boat" },
  { value: "Sky diving", label: "Sky diving" },
];

In this code, we export an array of options that will be displayed in the select. Each option consists of a value and a label.

Implementing the Select

Now, let's integrate the select component into our application. Assuming you have a Parent component, import the necessary files we've created before:

import React,{ useState } from "react";
import Select from "react-select";
import { customStyles } from "./select.styles";
import { options } from "./select-data";

export function Parent() {
const [selected, setSelected] = useState(null);

  const handleChange = (selectedItem) => {
    setSelected(selectedItem);
    console.log(`selected option:`, selectedItem);
  };

  return (
    <Select
      options={options}
      placeholder="select..."
      styles={customStyles}
      onChange={handleChange}
      blurInputOnSelect={true}
    />
    // Rest of the code...
  );
}

In this code, we import the Select component and the array from their respective files.

We define a function, handleChange, to handle the change event when a select option is selected.

Customize the function to perform the desired action based on the selected option. Finally, we render the Select component, passing the necessary props such as options, placeholder, and onChange.

Conclusion

By the power of react-select, we can create highly customizable select dropdown menus in our React applications.

The react-select library provides a rich set of features, allows us to apply custom styles and match our design requirements seamlessly.

With this knowledge, you can enhance user experience by incorporating intuitive selects into your applications.

Experiment with different styles and options to create selects that best suit your application's needs.

Hope this helps!