CODEWITHSUNDEEP
javascriptreactjsreact-select
8245734589
8245734589

Reputation: 47

Icon next to text in react-select mutli label

I'm using react-select and want icons to show next to the text of each label which can be added and removed via multiSelect.

const data = [
  { label: <svg /> && 'keyword one', value: 'keyword one' },
];

Only shows either the svg or the text. Does anyone know a way around this?

Upvotes: 1

Views: 2936

Answers (2)

NearHuscarl
NearHuscarl

Reputation: 81370

You're using && the wrong way. See short circuit evaluation for more detail. label can also accept a ReactNode, to fix the problem, define the option array as follow:

const options = [
  {
    value: "ocean",
    label: (
      <>
        <YourIcon /> Ocean
      </>
    ),
    color: "#00B8D9",
    isFixed: true
  },
  {
    value: "blue",
    label: (
      <>
        <YourIcon /> Blue
      </>
    ),
    color: "#0052CC"
  },
  {
    value: "purple",
    label: (
      <>
        <YourIcon /> Purple
      </>
    ),
    color: "#5243AA"
  }
];

Codesandbox Demo

Upvotes: 1

Shubham J.
Shubham J.

Reputation: 646

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.

Upvotes: 4

Related Questions