AppliedFilters| Hitchhikers Platform
The <AppliedFilters />
component displays any facets/filters applied to the search results. This is a common pattern on many site search experiences, for example Best Buy’s product search here:
The “Filters” section at the top is the exact functionality we aim to replicate with the <AppliedFilters />
component. Just like the Best Buy example, our Applied Filters show each filter as a pill with an “x” to clear a certain filter, as well as a “Clear all” button to clear all the filters at once.
Here’s what the <AppliedFilters />
component looks like:
Basic Example
You can use the <AppliedFilters />
component like so:
import {
VerticalResults,
ResultsCount,
AppliedFilters,
StandardCard,
} from "@yext/search-ui-react";
const App = (): JSX.Element => {
return (
<div className="flex justify-center px-4 py-6">
<div className="w-full max-w-5xl">
<ResultsCount />
<AppliedFilters />
<VerticalResults CardComponent={StandardCard} />
</div>
</div>
);
};
export default App;
Basic Customization
Like the rest of our components, you can customize the elements of the Standard Facets using the customCssClasses
prop.
The following example takes the above example and adds some styling to the card:
<AppliedFilters
customCssClasses={{
appliedFiltersContainer: "mx-4",
clearAllButton: "bg-slate-300 rounded border-2 border-black p-2",
removableFilter: "bg-sky-500 text-white",
}}
/>
The resulting Applied Filters look like this:
Component API
Prop | Description | Default | Type |
---|---|---|---|
customCssClasses? |
(Optional) CSS classes for customizing the component styling. | N/A | AppliedFiltersCssClasses |
hiddenFields? |
(Optional) Whether or not to show thumbs up/down buttons to provide feedback on the result card | false | boolean |
hierarchicalFacetrsDelimiter? |
(Optional) The delimiter for determining facet hierarchies. | “>” | string |
hierarchicalFacetsFieldIds |
(Optional) A set of facet fieldIds that should be interpreted as “hierarchical”. | N/A | string[] |