Plugins createAutocomplete

[FreddyCode95]

Hi Algolia,

I'm not sure how to implement plugins into my new custom Autocomplete I've create with createAutocomplete.

Like if I want to use these two plugins:

const plugins = useMemo(() => {
        const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
            key: "instantsearch",
            limit: 3,
        });

    const querySuggestionsPlugin = createQuerySuggestionsPlugin({
        indexName: process.env.NEXT_PUBLIC_ALGOLIA_INSTANTSEARCH_QUERY_SUGGESTIONS_INDEX_NAME,
        searchClient,
        categoryAttribute: [
            'instant_search',
            'facets',
            'exact_matches',
            'categories',
        ],
        transformSource({ source }) {
           console.log("source", source)
            return {
                ...source,
                onSelect({ item }) {
                    setIndexUiState((indexUiState) => ({
                        ...indexUiState,
                        query: item.query,
                        menu: {
                            categories: item.__autocomplete_qsCategory || '',
                        },
                    }));
                },
            };
        },
    });

    return [recentSearchesPlugin ,querySuggestionsPlugin];
}, []);

And call my componet like this:

<CustomAutocomplete placeholder="Search.." openOnFocus={true] plugins={plugins} />

How should I go about it with the plugins?

Best Regards Freddy

[Haroenv]

plugins is an argument to createAutocomplete, so you pass the argument on to that call. Would that work?

[FreddyCode95]

How would you implement it in this code:
[https://www.algolia.com/doc/ui-libraries/autocomplete/guides/creating-a-renderer/]

I would like to pass it down the props like function Autocomplete({plugins}) ... Just like you would do with the default @algolia/autocomplete-js

`const searchClient = algoliasearch(
  'latency',
  '6be0576ff61c053d5f9a3225e2a90f76'
);

function Autocomplete() {
  // (1) Create a React state.
  const [autocompleteState, setAutocompleteState] = React.useState({});
  const autocomplete = React.useMemo(
    () =>
      createAutocomplete({
        onStateChange({ state }) {
          // (2) Synchronize the Autocomplete state with the React state.
          setAutocompleteState(state);
        },
        getSources() {
          return [
            // (3) Use an Algolia index source.
            {
              sourceId: 'products',
              getItemInputValue({ item }) {
                return item.query;
              },
              getItems({ query }) {
                return getAlgoliaResults({
                  searchClient,
                  queries: [
                    {
                      indexName: 'instant_search',
                      query,
                      params: {
                        hitsPerPage: 4,
                        highlightPreTag: '<mark>',
                        highlightPostTag: '</mark>',
                      },
                    },
                  ],
                });
              },
              getItemUrl({ item }) {
                return item.url;
              },
            },
          ];
        },
      }),
    []
  );

  // ...
}`

[Haroenv]

Something like this:

const searchClient = algoliasearch(
  'latency',
  '6be0576ff61c053d5f9a3225e2a90f76'
);

function Autocomplete({plugins}) {
  // (1) Create a React state.
  const [autocompleteState, setAutocompleteState] = React.useState({});
  const autocomplete = React.useMemo(
    () =>
      createAutocomplete({
        plugins, // could be static here too
        onStateChange({ state }) {
          // (2) Synchronize the Autocomplete state with the React state.
          setAutocompleteState(state);
        },
        getSources() {
          return [
            // (3) Use an Algolia index source.
            {
              sourceId: 'products',
              getItemInputValue({ item }) {
                return item.query;
              },
              getItems({ query }) {
                return getAlgoliaResults({
                  searchClient,
                  queries: [
                    {
                      indexName: 'instant_search',
                      query,
                      params: {
                        hitsPerPage: 4,
                        highlightPreTag: '<mark>',
                        highlightPostTag: '</mark>',
                      },
                    },
                  ],
                });
              },
              getItemUrl({ item }) {
                return item.url;
              },
            },
          ];
        },
      }),
    []
  );

  // ...
}`

[FreddyCode95]

Okay thanks but it gives me this output. The dropdown is empty(The four search results is the Instant_search), as you can see on the pic. and thats after a couple of search it's till empty.... Should i provide any of the jsx? shouldn't that come with the import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches'; ?

And it works fine if I use the autocomplete build by algolia