Selected Facets

Overview

The SelectedFacets component displays all the selected filters or facets in a clear and organized manner, providing users with an easy way to review their current filtering criteria. This component is particularly useful for enhancing the user experience by offering intuitive controls to remove or deselect individual facets or to clear all selections at once. By integrating this component, users can effortlessly manage their filters, ensuring they maintain control over the search and discovery process.

Usage

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

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

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

Live Demo

// code for the above example
import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { ButtonFacet, Products, SelectedFacets } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchWrapper>
	...
	<SelectedFacets />
    <ButtonFacet
        name="gender_uFilter"
        renderAs="dropdown"
        applyAll={true}
        searchable={true}
        multiselect={true}
        clearBtn={true}
        selectAll={true}
        showSelectedFacets={true}
    />
    <ButtonFacet
        name="color_uFilter"
        renderAs="dropdown"
        applyAll={true}
        searchable={true}
        multiselect={true}
        clearBtn={true}
        selectAll={true}
        showSelectedFacets={true}
    />
	<Products />
	...
</UnbxdSearchWrapper>

Props

• Determines if the close component must be shown for each selected facet item element.
• Default Value: true.

• A component that will be used to render the close icon within each selected facet item element.
• Default Value:

const CloseIconComponent = () => {
	return <>&#x2715;</>;
};

• Determines if the facet name must be shown for each selected facet item.
• Default Value: true

• Determines if the clear all facets button must be shown or not.
• Default Value: true.

• The text that will be used for the clear all facets button.
• Default Value: "Clear all".

• 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={{
	root: "selected-facets", // used for the wrapper element
	item: "selected-item", // used for each selected facet item element
	label: "selected-label", // used for the label/name of each selected facet item
	closeBtn: "selected-closeBtn" // used for the close button icon
}}

Related Hook

To use the Unbxd ReactJS SDK without the pre-built SelectedFacets component, add the functionality to your custom component using the useFacets hook. Refer to the documentation for more details.

Related Components

Button FacetCheckbox FacetRadio Button FacetMultilevel FacetRange Facet