Add a unique class to items in a RefinmentList Component

Hi,

I have been trying to find an answer since last night but just can’t figure it out.
Basically I am trying to create a RefinmentList using colors. So far so good, but I’d like to add little color-swatches next to the items. I am guessing the best way would be to add a unique class to each element generated from the value.

I guess I need the transformItem but couldn’t figure out what to put in there:

<RefinementList attribute="attributes.options" transformItems={...}/>

I am using React (Gatsby JS).

Thanks a lot in advance and a wonderful day

That’s not a feature we have in the default widgets, however what you can do is the following:

It’s a higher order component that gives you full rendering access to the attributes, so you can also use that to add class names.

Read also more here on how to use connectors in general.

Thanks, and have a great weekend

Perfect :slight_smile: Looking up some examples using the connector I managed to get it working. it probably can still be optimized a little but here it is, in case anybody needs this in the future:

const ConnectedRefinementList = connectRefinementList(props => {
  const values = props.items.map(item => <li key={item.value}>
    <label>
      <input type="checkbox" className={item.label.toLowerCase()} checked={item.isRefined} onChange={() => props.refine(item.value)}/>
      {item.label} - {item.count}
    </label>
  </li>);
  return (
    <div>
      <ul>{values}</ul>
    </div>
  );
});