In this article you’ll find:

Overview

The React integration of Hawksearch results can be customized with additional functionalities and extended layouts. For this, it is required to install the react-hawksearch NPM package separately and include the extended build resources.

Goal

This document provides information regarding extending the Hawksearch results widget and its layout and styles.

Prerequisite

Extending the widget template

1. Follow the React SDK setup steps to set up the npm package in your target project. This should result in a dedicated folder with the specified structure (e.g. hawksearch/react).

2. Make a new .jsx file that will contain our custom search results markup and name it for example custom-search-results.jsx. Place it in a dedicated folder, e.g. hawksearch/react/widgets. Below is the default code used. Modify the react component markup to your specifications.
   
   

   import React from 'react'; import ReactDom from 'react-dom'; import { Hawksearch, QueryStringListener, FacetRail, Results } from 'react-hawksearch'; const InitializeSearchResults = (props) => { const config = props.config; return ( <Hawksearch config={config}> <QueryStringListener /> <div className="hawk"> <div className="hawk__body"> <FacetRail /> <Results /> </div> </div> </Hawksearch> ); } function RenderSearchResults(element, config) { if (!element || !config) { return; } ReactDom.render(<InitializeSearchResults config={config} />, element); } export default RenderSearchResults;

3. Make a new .jsx file that will be the entry point for the application. In the following snippet you can find the default code used. Make sure you change the import on line 18 to point to the overriden search results component we just made.

   import 'react-hawksearch/dist/esm/react-hawksearch.css'; import 'rheostat/css/rheostat.css'; import 'react-dates/lib/css/_datepicker.css'; import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet'; import cssInterface from 'react-with-styles-interface-css'; import RheostatDefaultTheme from 'rheostat/lib/themes/DefaultTheme'; import ReactDatesDefaultTheme from 'react-dates/lib/theme/DefaultTheme'; ThemedStyleSheet.registerInterface(cssInterface); ThemedStyleSheet.registerTheme({ ...RheostatDefaultTheme, ...ReactDatesDefaultTheme, }); import RenderSearchBox from '../widgets/search-box.jsx'; import RenderSearchResults from '../widgets/search-results.jsx'; function GetConfig(element) { if (!element) { return null; } const config = {}; var indexNameAttr = element.getAttribute('data-indexname'); var languageAttr = element.getAttribute('data-language'); var additionalParametersAttr = element.getAttribute('data-additionalparameters'); var trackedEventsAttr = element.getAttribute('data-trackedevents'); var hawksearchSettingsAttr = element.getAttribute('data-hawksearchsettings'); var searchPageUrlAttr = element.getAttribute('data-searchpageurl'); var indexName = indexNameAttr ? indexNameAttr : ""; var language = languageAttr ? languageAttr : null; var additionalParameters = additionalParametersAttr ? JSON.parse(additionalParametersAttr) : {}; var trackedEvents = trackedEventsAttr ? JSON.parse(trackedEventsAttr) : {}; var hawksearchSettings = hawksearchSettingsAttr ? JSON.parse(hawksearchSettingsAttr) : {}; var searchPageUrl = searchPageUrlAttr ? searchPageUrlAttr : ""; var configOverrides = { additionalParameters: additionalParameters, language: language, indexName: indexName, trackConfig: trackedEvents, searchPageUrl: searchPageUrl }; Object.assign(config, hawksearchSettings); Object.assign(config, configOverrides); return config; } window.addEventListener('load', function() { var searchBox = document.getElementById('hawksearch-react-search-box'); var searchResults = document.getElementById('hawksearch-react-search-results'); RenderSearchBox(searchBox, GetConfig(searchBox)); RenderSearchResults(searchResults, GetConfig(searchResults)); });

4. Build the JS resources as explained in React SDK setup .

5. Make sure the created JS file is loaded in your Layout.cshtml file.

6. You should now be able to see your custom search results.