6

I am wondering if react-select could show html in rendered options. For example if fetched ajax option has <b>text</b>, I would like to see text as bold in the dropdown menu instead of seeing <b>text</b>.

I read the documentation and I didnt find any option for this.

Thank you

Full Stack Alien
  • 11,244
  • 1
  • 24
  • 37
gospodin
  • 1,133
  • 4
  • 22
  • 42

4 Answers4

7

I implemented the above solution and it broke the searchable feature. The label expects a string, not an element. -- There is actually a prop/function to do this

formatOptionLabel={function(data) {
  return (
    <span dangerouslySetInnerHTML={{ __html: data.label }} />
  );
}}

Check out this post: React-Select: How to maintain search-ability while passing HTML to the label value in options

Full Stack Alien
  • 11,244
  • 1
  • 24
  • 37
2

As simple as:

{ value: 'foo', label: <span dangerouslySetInnerHTML={{ __html: 'bar &amp; foo' }} /> }

No option component, no option renderer, just simple jsx.

Walid Ammar
  • 4,038
  • 3
  • 25
  • 48
1

You can rely on the optionComponent prop of react-select and the dangerouslySetInnerHTML feature of React And give to optionComponent a component like this

const MyOptionComponent = props => <span dangerouslySetInnerHTML={{__html : props.option}} />;
Anis Smail
  • 707
  • 7
  • 22
  • hm I dont see how is this supposed to work;. `props.dangerouslySetInnerHTML` must be in the form `{__html: ...}` also I am already using optionRenderer for a highlighter like in the example here: https://github.com/JedWatson/react-select/issues/5 – gospodin Mar 16 '18 at 14:52
  • 1
    use it like that: dangerouslySetInnerHTML={{ __html: finalHtml }} – José Quinto Zamora Mar 16 '18 at 15:27
1

You can create either a custom optionRenderer or optionComponent for react-select.

I'd recommend you optionRenderer as it is more simple, if you only want to put convert to html. You can see an example here:

https://github.com/jquintozamora/react-taxonomypicker/blob/master/app/src/components/TaxonomyPicker/TaxonomyPicker.tsx#L135-L148

There is another example for optionComponent here (just in case you want extra functionality): https://github.com/JedWatson/react-select/blob/master/examples/src/components/CustomComponents.js#L15

José Quinto Zamora
  • 2,070
  • 12
  • 15
  • Hi, you example is just changing the way the option is rendered, there is still a problem with html not being interpreted. I am already using custom optionRenderer for highlighter like explained here: https://github.com/JedWatson/react-select/issues/5 – gospodin Mar 16 '18 at 14:56