Add recent search plugin to custom renderer

[Ojay]

Hi all,

I have a custom renderer setup (based off of this) and all is working well. My recent searches display, but I'm struggling to figure out how to access things like onRemove from transformSource.

Looking at the code from the custom renderer example, because we're mapping the collections, I think this overrides anything I do in the transformSource where I'm creating my recent search plugin.

I'm pretty stuck on this and so would really love some help in figuring out how to integrate recent searches, along with the built in functionality of things like onRemove, into an Autocomplete with a custom renderer.

Thanks so much,

Mark

Code from Demo...

{autocompleteState.collections.map((collection, index) => {
              const { source, items } = collection;

              return (
                <section key={`source-${index}`} className="aa-Source">
                  {items.length > 0 && (
                    <ul className="aa-List" {...autocomplete.getListProps()}>
                      {items.map((item) => {
                        return (
                          <li
                            key={item.objectID}
                            className="aa-Item"
                            {...autocomplete.getItemProps({ item, source })}
                          >
                            <div className="aa-ItemWrapper">
                              <div className="aa-ItemContent">
                                <div className="aa-ItemIcon aa-ItemIcon--picture aa-ItemIcon--alignTop">
                                  <img
                                    src={item.image}
                                    alt={item.name}
                                    width="40"
                                    height="40"
                                  />
                                </div>
                                <div className="aa-ItemContentBody">
                                  <div className="aa-ItemContentTitle">
                                    <Highlight hit={item} attribute="name" />
                                  </div>
                                  <div className="aa-ItemContentDescription">
                                    By <strong>{item.brand}</strong> in{' '}
                                    <strong>{item.categories[0]}</strong>
                                  </div>
                                </div>
                              </div>
                              <div className="aa-ItemActions">
                                <button
                                  className="aa-ItemActionButton aa-DesktopOnly aa-ActiveOnly"
                                  type="button"
                                  title="Select"
                                  style={{ pointerEvents: 'none' }}
                                >
                                  <svg fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z" />
                                  </svg>
                                </button>
                              </div>
                            </div>
                          </li>
                        );
                      })}
                    </ul>
                  )}
                </section>
              );
            })}

An example of how I'm creating my recentSearches plugin...

const recentSearchesPlugin = createLocalStorageRecentlyViewedItems({
  key: 'recent-searches',
  limit: 4,
  transformSource({source}) {
    return {
      ...source,
      templates: {
        ...source.templates,
        header({state}) {
          if (state.query) {
            return null;
          }

          return (
            <>
              <span className="aa-SourceHeaderTitle">Custom title should appear</span>
              <div className="aa-SourceHeaderLine" />
            </>
          );
        },
      },
    };
  },
});