React Search Page

Final Product

Take a glimpse into your React Search Page created with the "hs-search-page" component. This powerful feature enables seamless searches with auto-suggestions, providing an intuitive user experience. Customize text displays, incorporate optional URLs and icons, and empower users with a dynamic search interface.

To achieve this follow below instructions.

Instructions:

1. Begin by installing "hs-search-page" in your existing React project. For more information, visit (https://www.npmjs.com/package/hs-search-page).

   cmd

   npm i hs-search-page

2. Import the HSSearchPage component in your project:

   JavaScript

   import HSSearchPage from "hs-search-page";

3. Utilize the component in your project as demonstrated below:

   JavaScript

   <HSSearchPage
     indexId={"YOUR INDEX ID"}    
     apiKey={"YOUR READ/WRITE API KEY"}   
     primaryText={""}    
     secondaryText={""}    
     targetURL={""}    
     iconURL={""}    
     onTypeSearch={true}
     />

4. Here's where to find the required information:

   1. Visit to /indices page(https://hoppysearch.com/indices) and select the index on which you want to apply connector.

   2. indexID:

      1. Retrieve your index ID from your index endpoint. For instance, if your index endpoint is (https://unm8df.hoppysearch.com) your index ID is "unm8df."
      2. 

   3. apiKey:

      1. Access Management -> API Keys section will provide you with the necessary API key.
      2. 

   4. onTypeSearch:

      1. Choose between "true" (automatic search as you type) or "false" (manual search by clicking the search button).

   5. primaryText, secondaryText, targetURL, iconURL:

      1. Customize these fields according to your dataset. For example, if you have data like this:
      JSON

      {
      "documents": [
          {
          "Id": 12,
          "ProductId": "B001M1L12M",
          "UserId": "A27KQ4QYY0O334",
          "ProfileName": "R. Strom",
          "HelpfulnessNumerator": 0,
          "HelpfulnessDenominator": 0,
          "Score": 5,
          "Time": 1258502400,
          "Summary": "super black does the job",
          "Text": "As with the Americolor red, red, super black works exceptionally well."
          },
          // Add more records as needed...
      ],
      "config": {
          "type": "append"
      }
      }
      3. Set these fields as follows:
         1. targetURL=url
         2. iconURL=image
         3. primaryText=name
         4. secondaryText=about
      4. You can modify it according to you dataset and requirements. targetURL and secondaryText are optional field.

For a step-by-step visual guide on implementing "hs-search-page" in your React project, watch this YouTube video.