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

PropertyDescriptionTypeDefault
categorySuffixSuffix element displayed when hovering on categorystring / React.ReactNode-
maxHeightMax height of the content in pixels (In order to enable scroll)number /string-
contentStylesAdditional styles applied to the contentReact.CSSProperties-
onCategorySelectCallback executed when category is selected(item: Category, selected: boolean) => void-
rootCategoryRoot (default) category displayed in dropdownCategory-
searchClearTooltipTooltip displayed when hovering on clear icon in search inputstring / React.ReactNode-
searchInputPlaceholderPlaceholder value of search bar inputstring-
selectedCategoriesIdsArray containing ids of already selected categoriesReact.ReactText[][]

Category

PropertyDescriptionTypeDefault
idUnique id of categoryReact.ReactText-
nameName of the categorynumber-
pathPath of the category. Each element of an array represents one level of nesting.string[]-