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[] | - |