Sorting

Basic Setup & Configuration

1. How do I import and use the Sorting components?

Import them from @unbxd-ui/react-search-components. Available components are SortButtons, SortDropdown, and SortRadioButtons.

import { UnbxdSearchCSRWrapper } from '@unbxd-ui/react-search-components';
import { SortButtons, SortDropdown, SortRadioButtons } from '@unbxd-ui/react-search-components';
 
<UnbxdSearchCSRWrapper>
  <SortButtons />
  <SortDropdown />
  <SortRadioButtons />
</UnbxdSearchCSRWrapper>

2. How many ways can I display sorting options?

There are three different ways to display sorting options, each offering the same functionality with different user interfaces:

1. SortButtons - Shows sorting options as individual clickable buttons in a horizontal or vertical layout
2. SortDropdown - Presents options in a compact dropdown menu that expands when clicked
3. SortRadioButtons - Displays options as radio button selections with labels

Choose the component that best fits your design requirements and available space.

3. How do I configure the available sorting options?

Pass an array of options through the options prop. Each option should have a value (for the sort parameter) and label (for display text).

const sortOptions = [
  { value: "price asc", label: "Price: Low to High" },
  { value: "price desc", label: "Price: High to Low" },
  { value: "rating desc", label: "Highest Rated" },
  { value: "popularity desc", label: "Most Popular" },
  { value: "title asc", label: "Name: A to Z" },
  { value: "title desc", label: "Name: Z to A" }
];

4. How do I add labels to the sorting components?

Set showLabel: true and provide a label prop with your desired text. The label will appear before the sorting controls.

5. Can I customize the dropdown activator in SortDropdown?

Yes, pass a custom component through the ActivatorComponent prop. The default shows the selected option's label and a dropdown arrow.

ActivatorComponent for SortDropdown:

const CustomActivator = ({ selectedOption, isOpen }) => (
  <button className="custom-activator">
    Sort by: {selectedOption?.label || 'Select'}
    <span className={`arrow ${isOpen ? 'up' : 'down'}`}>▼</span>
  </button>
);
 
<SortDropdown 
  options={sortOptions}
  ActivatorComponent={CustomActivator}
/>

6. Can I customize how each sorting option is displayed?

Yes, you can customize the content within sorting items using the CustomComponent prop to render custom content for each sorting option.

CustomComponent example:

const CustomSortItem = ({ item, onClick }) => (
  <div className="custom-sort-item" onClick={onClick}>
    <span className="sort-icon">⚡</span>
    <span className="sort-text">{item.label}</span>
    <span className="sort-badge">New</span>
  </div>
);
 
<SortButtons 
  options={sortOptions}
  CustomComponent={CustomSortItem}
/>

Sorting Behavior

1. How do different sorting components handle selection and what happens when I click an already selected sort value?

The behavior depends on the component type. For SortButtons, clicking an already selected sort option clears the sorting (sets sort to empty string), providing a toggle functionality. However, SortDropdown and SortRadioButtons don't toggle - selecting an option always applies that sort without clearing when clicking the same option again.

2. Can I use multiple sorting components on the same page?

Yes, all sorting components share the same sort state through the useSorting hook, so they will stay synchronized when used together.

Styling Customization

1. Does the React Search SDK provide default CSS for the sorting components?

Yes, the React Search SDK provides built-in CSS styles for all sorting components. To use the default styles, import the respective CSS files in your application:

// For SortButtons
import '@unbxd-ui/react-search-components/dist/styles/sortButtons.css';
 
// For SortDropdown  
import '@unbxd-ui/react-search-components/dist/styles/sortDropdown.css';
 
// For SortRadioButtons
import '@unbxd-ui/react-search-components/dist/styles/sortRadioButtons.css';

This provides basic styling for buttons, dropdowns, radio buttons, and their respective states (hover, selected, etc.). You can override these styles with your own CSS or use the styles prop to apply custom classes.

2. Can I customize the appearance of sorting components?

Yes, you can customize the appearance using the styles prop to override default CSS classes. Each component has its specific style properties.

You can also apply global styles by targeting the component's CSS classes or use CSS-in-JS solutions for dynamic styling based on component state.