Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features
Autoplay

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

    Tomasz ŁakomyTomasz Łakomy
    reactReact

    Dropdowns tend to be difficult. The behaviour of <select/> element varies from browser to browser and it's difficult to add options to search the values, select multiple values at once, remove ones that have been selected one by one etc.

    Instead of reinventing the wheel, it's worth to use a well-tested, battle-proven solution like React Select.

    In this lesson we are going to learn how to: use Select component to create a dropdown, convert it to a multi select input using isMulti prop, specify a default value using defaultValue prop and add custom styles using styles property based on CSS-in-JS.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss