Summary

Overview

The Summary component improves the search experience in two ways: it automatically corrects spelling errors in user queries (e.g. “iphone11” → “iPhone 11”), and it displays the number of products currently shown so users understand the scope of their results. Both corrections and counts update in real time as the search state changes.

Usage

// importing component
import { Summary } from "@unbxd-ui/react-search-components";
 
// import the style for the component
import "@unbxd-ui/react-search-components/styles/summary.css";

If the styles import does not work, use the following code to import it:

require.resolve("@unbxd-ui/react-search-components/styles/summary.css")

Live Demo

// This is a sample example. 
// Please go through the entire documentation for understanding different usecases and update as per your needs.
import { UnbxdSearchCSRWrapper } from "@unbxd-ui/react-search-hooks";
import { FixedPagination, Products, Summary } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchCSRWrapper>
	...
	<Summary />
	<Products />
	<FixedPagination />
	...
</UnbxdSearchCSRWrapper>

Props

• This prop will be used to style the component.
• The value must use a defined structure (the structure can be seen in the following example).
• The keys in the structure must be the same while the values can changed as per the user's choice.

styles={{
    wrapper: "spellcheck-wrapper", // used for the wrapper component
    summaryText: "spellcheck-text", // used to show the query text
    productNumbers: "spellcheck-summary" // used to show the numbers of the currently shown products
}}

Related Hooks