@synerise/ds-cascader NPM

id: cascader

title: Cascader

Cascader UI Component

Installation

npm i @synerise/ds-cascader
or
yarn add @synerise/ds-cascader

Usage

import Cascader from '@synerise/ds-cascader'
const rootCategory = {
  id: 0,
  name: 'Home',
  path: ['Home'],
  Phones: {
    path: ['Home','Phones'],
    id: 1,
    name: 'Phones',
  },
  Computers: {
    path: ['Home', 'Computers'],
    name: 'Computers',
    id: 2,
    Laptops: {
      path: ['Home', 'Computers', 'Laptops'],
      name: 'Laptops',
      id: 3,
    },
  },
}
<Cascader
  rootCategory={rootCategory}
  categorySuffix={<div>select category</div>}
  selectedCategoriesIds={[2]}
/>

Demo

API

Property	Description	Type	Default
categorySuffix	Suffix element displayed when hovering on category	string / React.ReactNode	-
maxHeight	Max height of the content in pixels (In order to enable scroll)	number /string	-
contentStyles	Additional styles applied to the content	React.CSSProperties	-
onCategorySelect	Callback executed when category is selected	(item: Category, selected: boolean) => void	-
rootCategory	Root (default) category displayed in dropdown	Category	-
searchClearTooltip	Tooltip displayed when hovering on clear icon in search input	string / React.ReactNode	-
searchInputPlaceholder	Placeholder value of search bar input	string	-
selectedCategoriesIds	Array containing ids of already selected categories	React.ReactText[]	[]

Category

Property	Description	Type	Default
id	Unique id of category	React.ReactText	-
name	Name of the category	number	-
path	Path of the category. Each element of an array represents one level of nesting.	string[]	-

@synerise/ds-divider @synerise/ds-icon @synerise/ds-menu @synerise/ds-scrollbar @synerise/ds-search @synerise/ds-search-bar @synerise/ds-utils

@infinitebrahmanuniverse/nolb-_syn @everything-registry/sub-chunk-889 @zalastax/nolb-_syn

4 days ago

10 days ago

12 days ago

13 days ago

21 days ago

25 days ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

10 months ago

10 months ago

11 months ago

10 months ago

11 months ago

11 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

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago