In this article you will find:
| Table of Contents |
|---|
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.
...
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).
Open the active results widget template for editing. It is located in Mvc\Views\Hawksearch\Hawksearch.Default.cshtml. If a resource package is used, then edit the same path in the ResourcePackages folder. Make sure that this is the correct template.
Copy the file of the base template and name it accordingly (Hawksearch.CustomResults.cshtml for example).
Make sure to enable the proper markup (i.e. the target element) in the widget template. It should have the react prefix.
Import the bundled JS resources that include the component's initialization.
Code Block @Html.Script(Url.WidgetContent("hawksearch/react/build/js/<build_file>.js"), "bottom", false)Clean up all other component's markup that is not relevant to this widget.
Save, rebuild and refresh the page.
...