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

0.0.0-canary-20250115180351 • Published 11 months ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

11 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

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

@commercetools-frontend/ui-kit

10 months ago

10 months ago

0.0.0-fec-155-react-19-20250115180926

11 months ago

11 months ago

11 months ago

10 months ago

9 months ago

0.0.0-canary-20250210195612

10 months ago

0.0.0-canary-20241216163832

12 months ago

7 months ago

10 months ago

0.0.0-canary-20250509133828

7 months ago

10 months ago

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

7 months ago

0.0.0-canary-20250115174211

11 months ago

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

11 months ago

0.0.0-canary-20241127122717

1 year ago

0.0.0-canary-20250526144833

7 months ago

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

7 months ago

0.0.0-canary-20241204190350

1 year ago

0.0.0-canary-20250423204910

8 months ago

1 year ago

0.0.0-canary-20241219083309

12 months ago

0.0.0-canary-20241107165715

1 year ago

0.0.0-canary-20241218170348

12 months ago

1 year ago

0.0.0-canary-20241204151736

1 year ago

0.0.0-canary-20241105102837

1 year ago

0.0.0-fec-155-react-19-20250122185524

11 months ago

0.0.0-fec-155-react-19-20250220161555

10 months ago

0.0.0-preview-test-icon-entrypoints-20241212201418

12 months ago

0.0.0-fec-155-react-19-20250430141715

7 months ago

0.0.0-canary-20250430132533

7 months ago

0.0.0-canary-20250527153657

7 months ago

0.0.0-canary-20250527152601

7 months ago

7 months ago

0.0.0-fec-155-react-19-20250502154050

7 months ago

0.0.0-canary-20250430083246

7 months ago

0.0.0-preview-test-canary-preview-20241204111237

1 year ago

0.0.0-canary-20250423192548

8 months ago

0.0.0-main-20250115172531

11 months ago

0.0.0-canary-20241111111020

1 year ago

7 months ago

0.0.0-fec-155-react-19-20250528075244

6 months ago

0.0.0-canary-20241216165753

12 months ago

0.0.0-fec-155-react-19-20250121185545

11 months ago

0.0.0-canary-20250115180351

11 months ago

0.0.0-canary-20241217082213

12 months ago

11 months ago

0.0.0-canary-20250210092039

10 months ago

0.0.0-fec-155-react-19-20250130165953

10 months ago

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

11 months ago

0.0.0-canary-20250117201549

11 months ago

0.0.0-canary-20250207113149

10 months ago

0.0.0-fec-155-react-19-20250122162343

11 months ago

1 year ago

1 year ago

0.0.0-fec-155-react-19-20250509174305

7 months ago

0.0.0-canary-20250423133439

8 months ago

0.0.0-canary-20241119102545

1 year ago

0.0.0-fec-155-react-19-20250519144337

7 months ago

0.0.0-canary-20250506123533

7 months ago

0.0.0-canary-20250604201102

6 months ago

0.0.0-fec-155-react-19-20250115180337

11 months ago

0.0.0-canary-20250509142321

7 months ago

0.0.0-canary-20250611133647

6 months ago

7 months ago

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

12 months ago

0.0.0-canary-20250220095507

10 months ago

12 months ago

12 months ago

0.0.0-canary-20250509132257

7 months ago

0.0.0-canary-20250509190617

7 months ago

0.0.0-canary-20250423200631

8 months ago

0.0.0-canary-20241204193303

1 year ago

0.0.0-canary-20250604201729

6 months ago

0.0.0-canary-20241202165718

1 year ago

1 year ago

6 months ago

0.0.0-canary-20241119103253

1 year ago

0.0.0-preview-test-icon-bundle-20241210182318

12 months ago

0.0.0-canary-20250604223550

6 months ago

0.0.0-fec-155-react-19-20250117211328

11 months ago

0.0.0-canary-20250502151616

7 months ago

0.0.0-canary-20241114144303

1 year ago

0.0.0-canary-20250115170515

11 months ago

8 months ago

0.0.0-canary-20241120095444

1 year ago

0.0.0-canary-20241210173201

12 months ago

0.0.0-canary-20241205123945

1 year ago

0.0.0-canary-20250224143609

10 months ago

0.0.0-canary-20250210212858

10 months ago

0.0.0-canary-20250130153935

10 months ago

0.0.0-canary-20241213213332

12 months ago

0.0.0-canary-20250121162920

11 months ago

0.0.0-canary-20250423194122

8 months ago

0.0.0-canary-20250509143045

7 months ago

0.0.0-canary-20250430133635

7 months ago

0.0.0-canary-20250604222925

6 months ago

0.0.0-canary-20250220135616

10 months ago

1 year ago

0.0.0-preview-test-icon-entrypoints-20241212180849

12 months ago

0.0.0-canary-20250115175352

11 months ago

0.0.0-fec-155-react-19-20250116191128

11 months ago

0.0.0-canary-20250602072305

6 months ago

0.0.0-canary-20250324145134

9 months ago

12 months ago

0.0.0-canary-20250423193304

8 months ago

0.0.0-canary-20241121130642

1 year ago

0.0.0-canary-20241107133620

1 year ago

0.0.0-canary-20241028125808

1 year ago

0.0.0-preview-FCT-1187-20241024123200

1 year ago

0.0.0-preview-FCT-1187-20241021190428

1 year 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