React-instantsearch: MultiRange Label Object

[flouc001]

Question

Should MultiRange accept Object typed variables passed to it's label property to support JSX? Currently it throws a warning as it only expects type String.

[mthuret]

Hi @flouc001

That's a choice we made, translations such as labels are only accepting strings.

If you wish to have a complete different render then you should use the connectMultiRange connector.

MultiRange also accepts a transformItems props if you need to add information without touching the DOM.

What are you trying to achieve in term of display?

[flouc001]

Hi @mthuret

That's unfortunate. The render is completely fine and gives me the desired look and feel however I get a PropType warning telling me I should be using a String when I am in fact passing a JSX Object.

It's just a warning so it can be ignored however it would be nice to add objects to the acceptable PropTypes. However like you say the decision was made.

Thanks for your reply!

[mthuret]

I'm curious, can you share the look and feel of what you're doing?

[flouc001]

So I have created a React Component called Icon which essentially takes properties and renders a FontAwesome formatted <i> element. I am replicating the StarRating widget from just using the MultiRange widget instead. To make it look nice I use FontAwesome stars for the label property. Here's an example:

<MultiRange attributeName="rank" 
    items={[
        {start:0, label: (<span><Icon icon="star" /><span>{" & Up"}</span></span>)}
    ]}
/>

Obviously this example isn't complete but it gives an idea.

[mthuret]

That's good to know. I'm closing this for now.

I'll let you know if there's any evolution about this subject.