@commercetools-uikit/quick-filters NPM | npm.io

20.0.0 • Published 4 months ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

4 months ago

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

javascript typescript design-system react uikit

@babel/runtime @babel/runtime-corejs3 @commercetools-uikit/design-system @commercetools-uikit/tag @emotion/react @emotion/styled react-intl

@commercetools-frontend/ui-kit

8 months ago

8 months ago

0.0.0-fec-155-react-19-20250115180926

9 months ago

9 months ago

9 months ago

8 months ago

8 months ago

0.0.0-canary-20250210195612

8 months ago

0.0.0-canary-20241216163832

10 months ago

5 months ago

8 months ago

0.0.0-canary-20250509133828

5 months ago

8 months ago

0.0.0-SUPPORT-32352-de-ch-money-input-20250509174254

5 months ago

0.0.0-canary-20250115174211

9 months ago

0.0.0-preview-fec-155-react-19-20250108172010

9 months ago

0.0.0-canary-20241127122717

11 months ago

0.0.0-canary-20250526144833

5 months ago

0.0.0-FCT-1500-adjust-legacy-css-reset-20250527090339

5 months ago

0.0.0-canary-20241204190350

11 months ago

0.0.0-canary-20250423204910

6 months ago

12 months ago

0.0.0-canary-20241219083309

10 months ago

0.0.0-canary-20241107165715

12 months ago

0.0.0-canary-20241218170348

10 months ago

11 months ago

0.0.0-canary-20241204151736

11 months ago

0.0.0-canary-20241105102837

12 months ago

0.0.0-fec-155-react-19-20250122185524

9 months ago

0.0.0-fec-155-react-19-20250220161555

8 months ago

0.0.0-preview-test-icon-entrypoints-20241212201418

10 months ago

0.0.0-fec-155-react-19-20250430141715

6 months ago

0.0.0-canary-20250430132533

6 months ago

0.0.0-canary-20250527153657

5 months ago

0.0.0-canary-20250527152601

5 months ago

5 months ago

0.0.0-fec-155-react-19-20250502154050

6 months ago

0.0.0-canary-20250430083246

6 months ago

0.0.0-preview-test-canary-preview-20241204111237

11 months ago

0.0.0-canary-20250423192548

6 months ago

0.0.0-main-20250115172531

9 months ago

0.0.0-canary-20241111111020

11 months ago

5 months ago

0.0.0-fec-155-react-19-20250528075244

5 months ago

0.0.0-canary-20241216165753

10 months ago

0.0.0-fec-155-react-19-20250121185545

9 months ago

0.0.0-canary-20250115180351

9 months ago

0.0.0-canary-20241217082213

10 months ago

9 months ago

0.0.0-canary-20250210092039

8 months ago

0.0.0-fec-155-react-19-20250130165953

9 months ago

0.0.0-preview-fec-155-react-19-20250113184401

9 months ago

0.0.0-canary-20250117201549

9 months ago

0.0.0-canary-20250207113149

8 months ago

0.0.0-fec-155-react-19-20250122162343

9 months ago

11 months ago

11 months ago

0.0.0-fec-155-react-19-20250509174305

5 months ago

0.0.0-canary-20250423133439

6 months ago

0.0.0-canary-20241119102545

11 months ago

0.0.0-fec-155-react-19-20250519144337

5 months ago

0.0.0-canary-20250506123533

6 months ago

0.0.0-canary-20250604201102

5 months ago

0.0.0-fec-155-react-19-20250115180337

9 months ago

0.0.0-canary-20250509142321

5 months ago

0.0.0-canary-20250611133647

4 months ago

6 months ago

0.0.0-preview-test-icon-pure-annotations-20241211181046

10 months ago

0.0.0-canary-20250220095507

8 months ago

10 months ago

10 months ago

0.0.0-canary-20250509132257

5 months ago

0.0.0-canary-20250509190617

5 months ago

0.0.0-canary-20250423200631

6 months ago

0.0.0-canary-20241204193303

11 months ago

0.0.0-canary-20250604201729

5 months ago

0.0.0-canary-20241202165718

11 months ago

11 months ago

5 months ago

0.0.0-canary-20241119103253

11 months ago

0.0.0-preview-test-icon-bundle-20241210182318

10 months ago

0.0.0-canary-20250604223550

5 months ago

0.0.0-fec-155-react-19-20250117211328

9 months ago

0.0.0-canary-20250502151616

6 months ago

0.0.0-canary-20241114144303

11 months ago

0.0.0-canary-20250115170515

9 months ago

6 months ago

0.0.0-canary-20241120095444

11 months ago

0.0.0-canary-20241210173201

10 months ago

0.0.0-canary-20241205123945

11 months ago

0.0.0-canary-20250224143609

8 months ago

0.0.0-canary-20250210212858

8 months ago

0.0.0-canary-20250130153935

9 months ago

0.0.0-canary-20241213213332

10 months ago

0.0.0-canary-20250121162920

9 months ago

0.0.0-canary-20250423194122

6 months ago

0.0.0-canary-20250509143045

5 months ago

0.0.0-canary-20250430133635

6 months ago

0.0.0-canary-20250604222925

5 months ago

0.0.0-canary-20250220135616

8 months ago

12 months ago

0.0.0-preview-test-icon-entrypoints-20241212180849

10 months ago

0.0.0-canary-20250115175352

9 months ago

0.0.0-fec-155-react-19-20250116191128

9 months ago

0.0.0-canary-20250602072305

5 months ago

0.0.0-canary-20250324145134

7 months ago

10 months ago

0.0.0-canary-20250423193304

6 months ago

0.0.0-canary-20241121130642

11 months ago

0.0.0-canary-20241107133620

12 months ago

0.0.0-canary-20241028125808

12 months ago

0.0.0-preview-FCT-1187-20241024123200

12 months ago

0.0.0-preview-FCT-1187-20241021190428

12 months ago

1 year ago

0.0.0-canary-20241014160150

1 year ago

0.0.0-canary-20241011135231

1 year ago

0.0.0-canary-20241010205637

1 year ago

0.0.0-canary-20241010162605

1 year ago

0.0.0-canary-20241010130729

1 year ago

0.0.0-canary-20241009193324

1 year ago

0.0.0-canary-20241009175534

1 year ago

1 year ago

0.0.0-canary-20241009071024

1 year ago

1 year ago

0.0.0-canary-20241003153231

1 year ago

0.0.0-canary-20241003151043

1 year ago

0.0.0-canary-20241003145429

1 year ago

0.0.0-canary-20241002142913

1 year ago

0.0.0-canary-20241002142715

1 year ago

0.0.0-canary-20241002130953

1 year ago

0.0.0-canary-20241001174409

1 year ago