Add an icon before the input element in react-select

user_7528968 0
Viewed 17115

I am trying to add an icon in front of the input element of react select. I am able to get the icon in placeholder but the problem with a placeholder is that when I select some data from the dropdown the placeholder icon gets removed. I need some help to get the icon in front of the Select statement.

Here's the code of what I have achieved till now

import React, { Component } from 'react'
import Select, { components } from 'react-select'

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 DropdownIndicator = (props) => {
            return components.DropdownIndicator && (
                <components.DropdownIndicator {...props}>
                    <i className="fa fa-search" aria-hidden="true" style={{ position: 'initial' }}></i>
                </components.DropdownIndicator>
            );
        };
        return (
            <div>
                <div>
                    <Select
                        options={influencers}
                        isMulti={false}
                        onChange={this.handleInfluencerName}
                        isSearchable={true}
                        components={{ DropdownIndicator }}
                        placeholder={placeholderComponent}
                        classNamePrefix="vyrill"/>
                </div>
            </div>
        )
    }
}

const placeholderComponent = (
    <div>
        <i className="fa fa-search" aria-hidden="true" style={{ position: 'initial' }}></i>
        I am placeholder
    </div>
);
react-select reactjs javascript
1 Answers

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.

user_95928440
Related