@licuido-ui/ui_filter-chiplist v4.0.1

FilterChipList

Filter chips clearly delineate and display options in a compact area. They are a good chips. A filter chip.

Author

• @author Henry Dyson J henry@crayond.co

Link

Story Book Link FilterChipList

PlayGround

Try it have a fun codeBox

Installation

npm i  @licuido-ui/ui_filter-chiplist

Import component

import { FilterChipList } from '@licuido-ui/ui_filter-chiplist';

Usage

<FilterChipList
  handleClearClick={() => console.log('handleCLearClick')}
  handleFilterClick={() => console.log('handleFilterClick')}
  handleChipClick={(item) => console.log('handleClick', item)}
  handleDelete={(item) => console.log('handleDelete', item)}
  variant={'filled'}
  options={List}
/>

Image

Sample Code

<FilterChipList
  filterchipTestId={'filterChipList'}
  clearButtonLabel={'Clear all'}
  chipDirection={'row'}
  className={''}
  sx={{}}
  chipGap={2}
  chipWrap={'wrap'}
  handleFilterClick={() => false}
  handleClearClick={() => false}
  handleChipClick={() => false}
  handleDelete={() => false}
  deleteIcon={<DeleteIcon />}
  chipStyles={{}}
  labelStyles={{}}
  filterChipButtonIcon={<FilterIcon />}
  filterButtonStyle={{}}
/>

Props