SortDropdown

Overview

The "SortDropdown" component on an e-commerce page allows users to rearrange products displayed on a search results or product listing page in a specific order.

This feature helps users quickly find the most relevant or interesting products based on their needs and preferences. It enables users to easily identify products in a particular price range or newly added items, making it more convenient for them to find what they are looking for.

E-commerce websites often have a default sort order when a user visits a category or search results page but also provide users with the option to change and adjust the sort order as desired.

Usage

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

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

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

Live Demo

// code for the above example
import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { SortDropdown, Products } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchWrapper>
	...
	<SortDropdown
		showLabel={true}
		label="Sort as:"
		options={[
			{
				value: "price desc",
				label: "High to Low",
			},
			{
				value: "price asc",
				label: " Low to High",
			},
		]}
	/>
	<Products />
	...
</UnbxdSearchWrapper>

Props

• The component that will be rendered for each option.
• Default Value:

const CustomComponent = (props) => {
	const { item } = props;
	return item;
};

• The component that will be used as the dropdown activator. Clicking this will show/hide the dropdown options.
• Default Value:

const ActivatorComponent = ({ selected, styles }: { selected?: any, styles: any }) => {
	return <div className={styles?.activatorWrapper || defaultSortDropdownProps.styles?.activatorWrapper}>
		<div className={styles?.activatorText || defaultSortDropdownProps.styles?.activatorText}>
			{typeof selected == "object" ? selected.label : "Select"}
		</div>
		<div className={styles?.activatorIcon || defaultSortDropdownProps.styles?.activatorIcon}>
			&#8964;
		</div>
	</div>
};

• A boolean value which indicates if the label must be shown or not.
• Default Value: true.

• The text that must be shown as the label to the sorting component.
• Default Value: "Sort".

• The options that must be displayed in the dropdown.
• Default Value:

options={[
    {
        value: "price desc",
        label: "Price High to Low",
    },
    {
        value: "price asc",
        label: " Price Low to High",
    },
]}

• 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: "sort-root",
    label: "sort-label",
    selectWrapper: "sort-dd-wrapper",
    select: "sort-dd-select",
    body: "sort-dd-body",
    option: "sort-dd-option",
    selected: "sort-dd-selected",
    activatorWrapper: "sort-activator",
    activatorText: "sort-text",
    activatorIcon: "sort-icon"
}}

Related Hook

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

Related Components

Sort ButtonsSort Radio Butons