\n \n )}\n )\n }\n\n```\n\n### Result Widget ###\n\nThe SearchStax Site Search solution provides a React and Next.js results widget to support your custom search page.\n\nThe SearchstaxResultsWidget displays the search results.\n\n**Usage**\n\n```\n\n```\n\n**Props**\n\n- renderMethod – either “pagination” or “infiniteScroll”.\n- resultsPerPage – number of results on a page.\n- afterLinkClick – Callback function invoked when a result link is clicked. Allows modifying the result object.\n- resultsTemplate - template override for result view\n- noResultTemplate - template override for no results view\n\n\n**Result Template Override**\n\nThe resultsTemplate prop allows customizing the result UI.\n\nIt receives no props:\n- custom?: any - custom properties that may be added through aftersearchHook\n- ribbon: string | null\n- paths: string | null;\n- url: string | null;\n- title: string | null;\n- titleTracking: string | null;\n- promoted: boolean | null;\n- thumbnail: string | null;\n- date: string | null;\n- snippet: string | null;\n- description: string | null;\n- uniqueId: string;\n- position: number;\n- distance: number | null;\n- unit: string | null;\n- unmappedFields: {\n key: string;\n value: string | string[] | boolean;\n isImage?: boolean;\n }[] - fields that were not mapped.\n- allFields: { key: string; value: string | string[] | boolean }[] - all fields\n\n\n**No Results Template Override**\n\nThe noResultTemplate prop allows customizing the result UI.\n\nIt receives following props:\n\n- spellingSuggestion - suggestion of corrected spelling\n- searchExecuted - boolean if search was executed\n- searchTerm - term that was searched\n\n**Example of default render method**\n```\n\n```\n\n**Example of infinite scroll and pagination render methods**\n```\nfunction noResultTemplate(\n searchTerm: string,\n metaData: ISearchstaxSearchMetadata | null,\n executeSearch: (searchTerm: string) => void\n): React.ReactElement {\n return (\n
\n
\n {\" \"}\n Showing no results for \"{searchTerm}\"\n \n {metaData?.spellingSuggestion && (\n \n Did you mean{\" \"}\n {\n e.preventDefault();\n executeSearch(metaData?.spellingSuggestion);\n }}\n >\n {metaData?.spellingSuggestion}\n \n ?\n \n )}\n
\n
\n
\n {\" \"}\n Try searching for search related terms or topics. We offer a wide\n variety of content to help you get the information you need.{\" \"}\n
\n );\n })}\n \n \n );\n })}\n \n )}\n \n );\n}\n\n // Infinite scroll\n\n\n\n```\n\n### Pagination Widget ###\n\nThe SearchStax Site Search solution offers a pagination widget for React and Next.js search pages.\n\nThe SearchstaxPaginationWidget displays pagination controls for search results.\n\n**Usage**\n\n```\n\n```\n\n**Props**\n- paginationTemplate - template override for pagination widget\n\n**Main Template Override**\n\nMain template for the pagination controls.\n\nIt receives following props:\n\n- nextPageLink - link of next page;\n- previousPageLink - link of previous page;\n\n\n**Infinite Scroll Template Override**\n\nMain template for the pagination controls in infinite scroll mode.\n\nIt receives following props:\n- isLastPage - boolean, true if its last page\n- results - results.length can be used if there are results\n\n**Example**\n\n```\nfunction paginationTemplate(\n paginationData: IPaginationData | null,\n nextPage: (event: React.MouseEvent) => void,\n previousPage: (\n event: React.MouseEvent\n ) => void\n ) {\n return (\n <>\n {paginationData && paginationData?.totalResults !== 0 && (\n
\n {\n nextPage(e);\n }}\n onKeyDown={(e) => {\n if(e.key === 'Enter' || e.key === ' ') {\n nextPage(e as any);\n }\n }}\n >\n Show More >\n \n
\n )}\n \n );\n }\n\n// example of pagination widget for infinite scroll\n\n```\n\n### Facets Widget ###\n\nThe SearchStax Site Search solution offers a SearchstaxFacetsWidget component for React and Next.js. This widget displays the search facets.\n\n**Facet Selection and Order**\n\nFacet lists are configured and ordered on the Site Search [Faceting Tab](https://www.searchstax.com/docs/searchstudio/faceting-tab/).\n\n**Usage**\n\n```\n\n```\n\n**Props**\n\n- facetingType: \"and\" | \"or\" | \"showUnavailable\" | \"tabs\"; // type that determines how facets will behave\n- specificFacets?: string[]; // optional array of facet names that if provided will only render those facets\n- itemsPerPageDesktop: number; // default expanded facets for desktop\n- itemsPerPageMobile: number; // default expanded facets for mobile\n- facetsTemplateDesktop - template override for desktop view\n- facetsTemplateMobile - template override for mobile view\n- beforeFacetsRender `(facets: IFacetData[]) => IFacetData[]` — Called with the current facets array before the widget renders. Return the same or a modified array to filter, reorder, or transform facets (e.g., hide certain facets or change their order).\n\n\n**Main Template Desktop Override**\n\nMain wrapper template for desktop facets display.\n\nIt receives following props from [IFacetsTemplateData](https://www.searchstax.com/docs/searchstudio/interfaces/#h-facets-interfaces)\n\n\n**Main Template Mobile Override**\n\nMain wrapper template for mobile facets display.\n\nIt receives following props from [IFacetsTemplateData](https://www.searchstax.com/docs/searchstudio/interfaces/#h-facets-interfaces)\n\n\n**Example**\n```\n function facetsTemplateDesktop(\n facetsTemplateDataDesktop: IFacetsTemplateData | null,\n facetContainers: {\n [key: string]: React.LegacyRef | undefined;\n },\n isNotDeactivated: (name: string) => boolean,\n toggleFacetGroup: (name: string) => void,\n selectFacet: (\n index: string,\n event: React.MouseEvent,\n data: IFacetValueData,\n isInput: boolean\n ) => void,\n isChecked: (facetValue: IFacetValueData) => boolean | undefined,\n showMoreLessDesktop: (\n e: React.MouseEvent,\n data: IFacetData\n ) => void\n) {\n return (\n