How to add an icon in the react-select dropdown
📅October 1, 2021
Today we will show you how to add an icon in the react-select dropdown. In the previous articles, we have explained multiple examples with the react-select dropdown.
Checkout more articles on ReactJS
- picker-in-the-react" title="How to add Emoji Picker in the React">How to add Emoji Picker in the React
- pagination-in-reactjs" title="How to implement pagination in ReactJS">How to implement pagination in ReactJS
- autocomplete-in-reactjs" title="Google Place Autocomplete in ReactJS">Google Place Autocomplete in ReactJS
- file-in-reactjs" title="How to play an mp3 file in ReactJS">How to play an mp3 file in ReactJS
- scroll-to-the-top-of-the-page-after-render-in-reactjs" title="Scroll to the top of the page after render in ReactJS">Scroll to the top of the page after render in ReactJS
Demo Application
Output - How to add an icon in the react-select dropdown - Clue Mediator
Steps to add an icon in the react-select
1. Implement the react-select dropdown
Let’s implement the react-select dropdown in the react application. Check out the following article to implement a dropdown.
2. Customize the label for the dropdown
Let’s assume that we have a list of items that contain the icon and display text as below.
[
{
value: 1,
text: 'Up Arrow',
icon: <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-circle" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z"></path>
</svg>
},
{
value: 2,
text: 'Down Arrow',
icon: <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-circle" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z"></path>
</svg>
},
{
value: 3,
text: 'Left Arrow',
icon: <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-circle" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-4.5-.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"></path>
</svg>
},
{
value: 4,
text: 'Right Arrow',
icon: <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"></path>
</svg>
}
]
As an icon we have taken the svg image but you can take any icons such as line icons, font awesome icons, etc.
To customize the label, we will use the `getOptionLabel` property of the react-select dropdown.
<select placeholder="Select Option" value={selectedOption} options={data} onchange={handleChange} getoptionlabel="{e" ==""> (
{e.icon}
{e.text}
)}
/>
3. Output
Let’s combine all the code together and see how it looks.App.js
import React, { useState } from 'react';
import Select from 'react-select';function App() {
const data = [
{
value: 1,
text: 'Up Arrow',
icon:
},
{
value: 2,
text: 'Down Arrow',
icon:
},
{
value: 3,
text: 'Left Arrow',
icon:
},
{
value: 4,
text: 'Right Arrow',
icon:
}
]; const [selectedOption, setSelectedOption] = useState(null); // handle onChange event of the dropdown
const handleChange = e => {
setSelectedOption(e);
} return (
Add an icon in dropdown - Clue Mediator </select> (
<div style={{ display: 'flex', alignitems: 'center' }}>
{e.icon}
<span 5="" style={{ marginleft: }}>{e.text}</span>
</div>
)}
/>
{selectedOption && <div style={{ margintop: 20, lineheight: '25px' }}>
<b>Selected Option:</b> {selectedOption.value}
</div>}
);
}
export default App;
Run the application and check the output in the browser.
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
