How to Add an Icon to the Options in React-Select

How to add an icon to the options in react-select?

I found a workaround how to solve it. My technique is similar to @canda:

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";
import Select, { components } from "react-select";

const options = [
  { value: "England", label: "England", icon: "england.svg" },
  { value: "Germany", label: "Germany", icon: "germany.svg" }
];

const { Option } = components;
const IconOption = props => (
  <Option {...props}>
    <img
      src={require('./' + props.data.icon)}
      style={{ width: 36 }}
      alt={props.data.label}
    />
    {props.data.label}
  </Option>
);

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  render() {
    return (
      <Select
        defaultValue={options[0]}
        options={options}
        components={{ Option: IconOption }}
      />
    );
  }
}

render(<App />, document.getElementById("root"));

Add an icon before the input element in react-select

Based on what you've already done I would do a combination of custom style + custom component.

export default class InfluencersForm extends Component {
  constructor() {
    super();
    this.handleInfluencerName = this.handleInfluencerName.bind(this);
  }
  handleInfluencerName(event) {
    console.log(event);
  }
  render() {
    const influencers = [
      { value: "abc", label: "abc" },
      { value: "def", label: "def" }
    ];

    const ValueContainer = ({ children, ...props }) => {
      return (
        components.ValueContainer && (
          <components.ValueContainer {...props}>
            {!!children && (
              <i
                className="fa fa-search"
                aria-hidden="true"
                style={{ position: 'absolute', left: 6 }}
              />
            )}
            {children}
          </components.ValueContainer>
        )
      );
    };

    const DropdownIndicator = props => {
      return (
        components.DropdownIndicator && (
          <components.DropdownIndicator {...props}>
            <i
              className="fa fa-search"
              aria-hidden="true"
            />
          </components.DropdownIndicator>
        )
      );
    };

    const styles = {
      valueContainer: base => ({
        ...base,
        paddingLeft: 24
      })
    }

    return (
      <div>
        <div>
          <Select
            options={influencers}
            isMulti={false}
            onChange={this.handleInfluencerName}
            isSearchable={true}
            components={{ DropdownIndicator, ValueContainer }}
            classNamePrefix="vyrill"
            styles={styles}
          />
        </div>
      </div>
    );
  }
}

In my custom style I have added an arbitrary paddingLeft of 24 to make some space and add the desired icon. You might have to change it depending of the icon you want to use.

Then in ValueContainer next to the children I have put the fontAwesome icon.

Here a live example of my solution.

Icon next to text in react-select mutli label

You have to create your custom Option component.

Refer to this link for Custom Option components :

Also, I have created this sample sandbox example. Pardon me for bad CSS styling.

React select Icon click

The easiest way is to use event.stopPropagation inside the Icons functions. So something like:

function onEdit(event) => {
  event.stopPropagation();
  ...

But this means you won't be able to to catch the click anywhere else (for example you might have an open selector you might want to close when the page is clicked or something similar). Another pretty easy solution (and the option I would personally recommend) would be replacing e.stopPropagation() with e.preventDefault() + e.defaultPrevented

So basically you should add inside icons functions:

function onEdit(event) => {
  event.preventDefault();
  ...

and default onClick should have the condition. Something like:

function onClick(event) => {
  if(event.defaultPrevented) return
}

You can also see more about this topic here

---

Related Topics