@commercetools-uikit/quick-filters v20.0.0
QuickFilters
Description
The QuickFilters
component displays a selection of Tag
components that represent the available filter actions.
Installation
yarn add @commercetools-uikit/quick-filters
npm --save install @commercetools-uikit/quick-filters
Additionally install the peer dependencies (if not present)
yarn 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 | Function See 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
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
10 months ago
5 months ago
8 months ago
5 months ago
8 months ago
9 months ago
9 months ago
11 months ago
5 months ago
11 months ago
6 months ago
12 months ago
10 months ago
12 months ago
10 months ago
11 months ago
11 months ago
12 months ago
9 months ago
8 months ago
10 months ago
6 months ago
6 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
11 months ago
6 months ago
9 months ago
11 months ago
5 months ago
5 months ago
10 months ago
9 months ago
9 months ago
10 months ago
9 months ago
8 months ago
9 months ago
9 months ago
9 months ago
8 months ago
9 months ago
11 months ago
11 months ago
5 months ago
6 months ago
11 months ago
5 months ago
6 months ago
5 months ago
9 months ago
5 months ago
4 months ago
6 months ago
8 months ago
10 months ago
10 months ago
5 months ago
5 months ago
6 months ago
11 months ago
5 months ago
11 months ago
11 months ago
5 months ago
11 months ago
10 months ago
5 months ago
9 months ago
6 months ago
11 months ago
9 months ago
6 months ago
11 months ago
10 months ago
11 months ago
8 months ago
8 months ago
9 months ago
10 months ago
9 months ago
6 months ago
5 months ago
6 months ago
5 months ago
8 months ago
12 months ago
10 months ago
9 months ago
9 months ago
5 months ago
7 months ago
10 months ago
6 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago