olahol / react-tagsinput

Highly customizable React component for inputing tags.
MIT License
1.35k stars 233 forks source link

How do I add icon at the beginning of the component? #200

Open aayushdutt opened 4 years ago

aayushdutt commented 4 years ago

Example: image

afvr94 commented 4 years ago

Hello @aayushdutt, were you able to add the icon?

aayushdutt commented 4 years ago

@afvr94 Nope. I still need help regarding this.

empyreanmw commented 3 years ago

You should use renderInput prop, so something like this

const defaultRenderInput = (props) => {
    let { onChange, value, addTag, ...other } = props;
    return (
      <span>
        <Box
          position="relative"
          top="3px"
          as={AiOutlineSearch}
          color="#f8b700"
        ></Box>
        <input type="text" onChange={onChange} value={value} {...other} />
      </span>
    );
  };

Box component in this case is acting as an icon that will appear in front of the input field.

<TagsInput
        renderInput={defaultRenderInput}
        onChange={(e) => handleTags(e)}
        value={tags}
      />