QuickFilters

Description

The QuickFilters component displays a selection of Tag components that represent the available filter actions.

Installation

pnpm add @commercetools-uikit/quick-filters

npm --save install @commercetools-uikit/quick-filters

Additionally install the peer dependencies (if not present)

pnpm add react

npm --save install react

Usage

import { useState } from 'react';
import QuickFilters from '@commercetools-uikit/quick-filters';

const App = () => {
  const [items, setItems] = useState([
    {
      id: '1',
      label: 'Accepted',
      isActive: true,
    },
    {
      id: '2',
      label: 'Rejected',
      isActive: false,
    },
  ]);

  const onItemClick = (clickedItem) => {
    const updatedItems = items.map((item) => {
      return {
        ...item,
        isActive: item.id === clickedItem.id ? !item.isActive : false,
      };
    });
    setItems(updatedItems);
  };

  return <QuickFilters items={items} onItemClick={onItemClick} />;
};

export default App;

Properties

| Props | Type | Required | Default | Description | | ------------- | ------------------------------------------------------------------- | :------: | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | items | Array: TQuickFiltersItem[]See signature. | ✅ | | collection of quick filter items@param item.id unique identifier for the item. @param item.label label to display @param item.isActive the current active state of the item | | onItemClick | FunctionSee signature. | ✅ | | callback fn, executed when an item is clicked |

Signatures

Signature items

{
  /** unique identifier for the item. */
  id: string;
  /* label to display */
  label: string;
  /* the current active state of the item */
  isActive: boolean;
}

Signature onItemClick

(item: TQuickFiltersItem) => void