DEV Community

Cover image for How to Create Select with react-select
Cath Leyson
Cath Leyson

Posted on

1

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)",
  }),


};

Enter fullscreen mode Exit fullscreen mode

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" },
];
Enter fullscreen mode Exit fullscreen mode

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.

Image description
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...
  );
}
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay