Example: Resolve search term

Goal

Expose the entered search term on the results page.

Prerequisite

Steps to resolve

1. Create/Open the components folder in the designated react directory (e.g. hawksearch/react/components).

2. Create new component file for the search term (e.g. SearchTerm.tsx) and open for editing. Use the following sample as a base for the component:

   import React, { useEffect, useState } from 'react';
   
   import { useHawksearch } from 'react-hawksearch';
   
   function SearchTerm() {
       const {
           store: { searchResults },
       } = useHawksearch();
   
       const [keyword, setKeyword] = useState('');
   
       useEffect(() => {
           if (searchResults) {
               setKeyword(decodeURIComponent(searchResults.Keyword || ''));
           }
       }, [searchResults]);
   
       return (
           <div className="custom-class-name">
               <h1>{keyword}</h1>
           </div>
       );
   }
   
   export default SearchTerm;
   

3. Open the results widget js file for editing and import the newly created component

   ...
   import SearchTerm from '../components/SearchTerm';
   ...

4. Place the component in the desired place

   function App() {
       return (
           <Hawksearch config={hawkConfig}>
               <QueryStringListener />
               <div className="hawk">
                   <div className="hawk__header">
                       <SearchBox />
                   </div>
                   
                   <div className="custom-wrapper-class">
                       <SearchTerm />
                   </div>
                   
                   <div className="hawk__body">
                       <FacetRail />
   
                       <Results />
                   </div>
               </div>
           </HawkSearch>
       );
   }

5. Save, build the react bundle and re-build the solution.