Extending result item component

Prerequisite

Steps to extend

1. Create a components directory in the designated react folder.

2. Create a React component file (e.g. CustomItem.tsx)

3. Open the file to edit and import React and ResultItemProps

   import React from 'react'; import { ResultItemProps } from 'react-hawksearch';

    

4. Create the component function

   function CustomItem({ item }: ResultItemProps) { // Configuration goes here }

    

5. For the configuration, declare all the fields that are gone be used in this component

   let title = item.getDocumentValue('title'); let content = item.getDocumentValue('content');

    

6. The component function should return the structure

    

7. Export the component

    

8. Save the file.

9. Open the results component file for editing.

10. Import the newly created item component

11. Locate the Results component initialization. It should be in the App structure.

     

12. Set the ResultItem prop to point to the item component

     

13. Save and re-build the JS resources.

Examples

• Creating a custom item for dynamic layout based on content type (e.g. components/ContentTypeDynamicItem.tsx)