Create and customize a single and multi-select dropdown with React Select

Instructor: [00:00] We have a simple React application, which renders a select element. Inside of the select element, we render a bunch of options, which are different JavaScript technologies that you can choose from.

[00:11] We can see it over here. What we would like to do is to add more functionality to this select element. First, I would like to be able to search for React. I get React and React Native as results or choose many technologies at once.

[00:23] To do that, import select from react-select, and replace this native select with a select component. We are also going to provide an options object, which I'm going to import over here. Import options from options.

[00:45] I'm going to put it right here. If I save it, and we're going to refresh our page, we're going to see our brand-new React select component. If we take a look inside of options, we are going to see that this an array of object, which contain both value and label for an element.

[01:02] When using react-select, what we get by default is this dropdown that we can open. We can search for styles, for instance, view. I can also search for React and have two of these results. I can go ahead and select react-native.

[01:14] We can customize our dropdown a bit. For instance, we can set a default value. To do that, use defaultValue prop. I'm going to set it as the first option, which in this case is React. After we save it, refresh it, we're going to see that the React is chosen by default. Nevertheless, I can change it.

[01:31] We can also allow our users to select many values at once. To do that, use the isMulti property. What we have here as the result is that I can open this dropdown and select many different technologies. I can also go ahead and remove those.

[01:47] Currently, it can be a bit annoying to select many things at once, because this menu keeps closing every single time I select something. To change that, use the closeManyOnSelect prop, and set it to false. Now, if I open this dropdown, I am free to select many different options at once, and this menu is not closing. It's more convenient to the user.

[02:08] We can also style all the elements of this select component. In order to do that, we need to create a styles object, which is going to contain styles for different elements. For instance, I would like to style the multi value, which is the value selected in this multi select input.

[02:25] We need to provide a function. This function gets the current default styles of this element as an argument. We're going to spread all of those, and also add our own background color, which I'm going to set to papayawhip.

[02:38] To apply those styles to this component, use the styles property, which I'm going to set to the styles object that we just created. Now, we have the desired effect. We can see that whatever I select in this multi select box is going to have this beautiful background color of papayawhip.