Extending result item component

Owned by gabriel.georgiev (Deactivated)
Last updated: Mar 05, 2021
3 min read

Prerequisite

Create widget

Setup for development with typescript

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)

Â