How to Create a React Dropdown Control in Your Web Application

Dropdown controls are among the most frequently used input elements on the web, especially when filling out forms or navigating interfaces. They're a go-to solution for enabling users to make precise selections, whether picking a country, choosing a language, or responding to a predefined set of options.

While the native HTML <select> element offers basic functionality, there's no shortage of open-source and third-party dropdown components. But with so many choices, how do you decide which is right for your application?

That's where Wijmo's ComboBox comes in. It's a powerful and flexible React dropdown control designed for ease of use and deep customization. With a rich feature set and seamless integration with other controls, ComboBox makes it simple to deliver a polished user experience.

In this article, we'll walk through the key features of the ComboBox, including:

• Dropdown Implementation
• Styling the ComboBox Control
• Customizing the Dropdown Elements

Ready to get started? Download Wijmo Today!

Dropdown Implementation

Before implementing the ComboBox control, we'll need to install Wijmo's component library in the application. Inside your React app, run the following command:

npm install @mescius/wijmo.react.all

This will install all of Wijmo's files required to use the library in our React application.

Next, we'll need some data to load into the control. Create a new file called data.jsx, and add the following code:

export function getCountries() {
  return ['US', 'UK', 'China', 'Russia', 'Germany', 'India', 'Italy', 'Canada'];
}

Then, inside the app.jsx file, add the following imports:

import '@mescius/wijmo.styles/wijmo.css';
import * as wijmo from '@mescius/wijmo';
import * as wjInput from '@mescius/wijmo.react.input';
import { getCountries } from './data';
const data = getCountries();

This imports Wijmo's CSS file, core package, and the React input control package. We're also importing our data and assigning it to a variable, which we call data.

The last thing we need to do is define the Wijmo React dropdown in markup. Inside the file's return statement, add the following code:

<wjInput.ComboBox itemsSource={data}></wjInput.ComboBox>

Now, when you run the application, you should see the following in the browser:

As you can see, Wijmo's React dropdown neatly displays all our data. Next, we'll customize the look of the ComboBox.

Styling the ComboBox Control

Wijmo's ComboBox and all its other controls are highly customizable. For this sample, we will modify the dropdown to feature a dark-mode appearance.

One thing to point out is that when customizing some of Wijmo's core CSS classes, these changes must be implemented inside the styles.css file to take effect.

.wj-control .wj-input-group .wj-form-control {
    background: hsl(0, 0%, 15%);
    color: hsl(0, 0%, 70%);
    font-weight: bold;
    padding: 10px 16px 8px;
    font-size: 16px;
}
 
.wj-control .wj-input-group .wj-input-group-btn {
    background: hsl(0, 0%, 15%);
}
 
.wj-control .wj-input-group-btn>.wj-btn.wj-btn-default:hover {
    background: hsl(0, 0%, 30%);
    transition: .4s;
}
 
.wj-control .wj-input-group-btn>.wj-btn.wj-btn-default:hover .wj-glyph-down {
    color: hsl(0, 0%, 85%);
    transition: .4s;
}
 
.wj-combobox {
    border-radius: 0px;
    border: 1px solid rgba(0, 0, 0, 0.5);
}
 
.wj-listbox-item {
    background: hsl(0, 0%, 15%);
    color: hsl(0, 0%, 70%);
}
 
.wj-listbox-item.wj-state-selected {
    background: hsl(0, 0%, 30%);
}
 
.wj-control .wj-input-group .wj-input-group-btn:last-child:not(:first-child)>.wj-btn {
    border-left: 1px solid hsl(0, 0%, 70%);
}
 
.combo-dropdown > .wj-listbox-item:hover {
    cursor: pointer;
    background: hsl(0, 0%, 30%) !important;
    transition: .3s;
  }
 
.wj-glyph-down {
    color: hsl(0, 0%, 70%);
}

Now, there's a fair amount of code above, and it can look a little overwhelming, but all we're doing is modifying the size and color of the ComboBox. We're changing all the white in the dropdown to black, darkening the grey hover effect when users hover over list elements, and adding some padding to the control to give the content more space. When we run the application, we'll see the following:

Customizing the Dropdown Elements

Now, loading an array is pretty basic. In most scenarios, it won't be an array of strings but an array of objects you'll receive. The nice thing about this, however, is that ComboBox makes it easy to bind to objects and select which property of the object you want to bind to.

The first thing that we'll need to do is update our data. Instead of an array of strings, we're now going to set it up to be an array of objects, which will include the country name, sales, and expenses:

export function getCountries() {
  return [
    {
      country: 'US',
      sales: 8817,
      expenses: 4620
    }, {
      country: 'UK',
      sales: 5692,
      expenses: 3475
    }, {
      country: 'China',
      sales: 9184,
      expenses: 7214
    }, {
      country: 'Russia',
      sales: 3810,
      expenses: 2749
    }, {
      country: 'Germany',
      sales: 5693,
      expenses: 3267
    }, {
      country: 'India',
      sales: 7938,
      expenses: 5173
    }, {
      country: 'Italy',
      sales: 4197,
      expenses: 2972
    }, {
      country: 'Canada',
      sales: 5789,
      expenses: 3206
    }
  ];
}

This is going to cause a problem at first. If you make these changes and run the application, you're going to notice that the ComboBox doesn't display the data as expected:

As you can see, it now knows that we're passing it an array of objects to display, but it doesn't know what of that object we want to show. So, we're going to make another small change to the ComboBox component we're creating:

<wjInput.ComboBox itemsSource={data} displayMemberPath='country' headerPath='country'></wjInput.ComboBox>

We're doing two things here. First, displayMemberPath will allow us to set the property value from the object that we want to display; in this case, country. Second, we're setting the headerPath property to country as well. The headerPath property is used to decouple the value displayed in the dropdown from the value selected from the dropdown. This is used to display additional information in the dropdown menu, which we will cover next.

We will leverage Wijmo's templating abilities, which we can use to overwrite the default HTML that the dropdown uses. Expanding on the additions that we just made, we're going to add another property, called wjItemTemplate, which will contain our updated HTML template:

<wjInput.ComboBox itemsSource={data} displayMemberPath='country' headerPath='country' wjItemTemplate={(context) => (
  <div class="item">
    <div class="itemHeader"><b>{context.item.country}</div>
      Sales: <b>${context.item.sales}</b><br>
      Expenses: <b>${context.item.expenses}</b>
  </div>
)}></wjInput.ComboBox>

We're passing some custom HTML to the React ComboBox via the wjItemTemplate property, and we're using this to display additional information on sales and expenses for each item in the dropdown.

Now, whenever you run the application, you should see the following when expanding the ComboBox dropdown control:

Ready to try it out? Download Wijmo Today!

Conclusion

As you can see, building a very powerful and versatile React dropdown with Wijmo's ComboBox is simple. This article only scratches the surface of what you can do with the ComboBox. If you'd like more information, check out our demos, documentation, and API references.

Happy coding!