Implementing "Show more" button on CustomRefinementList (React)

I’ve created a CustomRefinementList based on the docs using connectRefinementList; however, there is no documentation on how to build the “Show more” button. I can set the limit, showMore, and showMoreLimit props, but this won’t do anything unless I also add the button to the template. I have been able to implement this in Angular:

<button *ngIf="showMoreLimit && state.canToggleShowMore"
        type="button"
        (click)="state.toggleShowMore()"
>
  {{state.isShowingMore ? 'Show more' : 'Show less'}}
</button>

But these props don’t seem to be available on the React implementation. The state I need doesn’t seem to be exposed. Am I missing something?

Thanks in advance!

Hi there,

I’m Dorian, software engineer at Algolia.

I’m not entirely sure I understand how you would want your custom refinement list to behave. For example, if you know in advance how many items you want to display before displaying the show more button you can do something similar to this live example. The source code for this is here.

However if you want this to be more dynamic, the first solution is to use the refinement list component in another component and determine the limit, whether you want to display a show more button etc before instantiating the refinement list within the parent component.

Or, second solution, if you absolutely need to access those parameters as a state within your own custom refinement list, here’s an example that might help:

const RefinementList = ({ items, refine, showMore, translations, limit }) => {
  const [extended, setExtended] = useState(false);
  return (
    <div className="ais-RefinementList">
      <ul>
        {items.map(
          (item, i) =>
            (i < limit || extended) && (
              <li
                style={{ fontWeight: item.isRefined ? 'bold' : '' }}
                onClick={(event) => {
                  event.preventDefault();
                  refine(item.value);
                }}
                key={item.label}
              >
                <label className="ais-RefinementList-label">
                  <span className="ais-RefinementList-labelText">
                    {item.label}
                  </span>
                </label>
              </li>
            )
        )}
      </ul>
      {showMore && (
        <button
          onClick={() => {
            setExtended(!extended);
          }}
          className="ais-RefinementList-showMore"
        >
          {translations['showMore'](extended)}
        </button>
      )}
    </div>
  );
};
export const ColorRefinementList = connectRefinementList(RefinementList);

Let me know if this helps and don’t hesitate to ask further questions!

1 Like

Hi Dorian,

Thank you for the quick reply! I really appreciate it :slight_smile:. I assumed that the same toggleShowMore method would be available on React, and I didn’t think to just create a local flag to toggle between the two limits.

Thanks again!
Nina