❤
npm
Sign UpSign In

@synerise/ds-menu
TypeScript icon, indicating that this package has built-in type declarations

0.20.6 • Public • Published

id: menu title: Menu

Menu UI Component

Installation

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

Usage

import Menu from '@synerise/ds-menu'

const items = [
  {
    text: 'Item 1',
    copyable: true,
    copyHint: 'Copy to clipboard',
    copyValue: 'Item 1',
    copyTooltip: 'Copied Item 1!'
  },
 {
    text: 'Item 2',
    copyable: true,
    copyHint: 'Copy to clipboard',
    copyValue: 'Item 2',
    copyTooltip: 'Copied Item 2!'
  },
];

// Render using dataSource passed as prop
<Menu  dataSource={items} />

// Render using dataSource mapping to Menu.Item
<Menu>
    {items.map(item => <Menu.Item {...item}/>}
</Menu>

Demo

<iframe src="/storybook-static/iframe.html?id=components-menu--default"></iframe>

Menu

Property Description Type Default
asDropdownwMenu Add additional styles for dropdown menu boolean false
dataSource Array of items to display in menu MenuItemProps[] -
ordered Determines if items should be displayed with index prefix (starting from 01) boolean false
maxToShowItems limits the number of items rendered. remaining are shown after button click number -
texts custom translations MenuTexts -

MenuItemProps

Property Description Type Default
children Children of the item React.ReactNode
copyable Boolean to enable option of copying the value to the clipboard boolean false
copyHint Text displayed on hovering copyable item string
copyValue Value to be copied to clipboard when copyable item is clicked string
copyTooltip Tooltip to be displayed when copyable item is clicked string / React.ReactNode
disabled Disable an item element boolean false
description Additional description displayed inside the item string / React.ReactNode
highlight Text to be highlighted inside the item string
indentLevel Indent level of the text inside the item. Number 0
parent Boolean to display arrow for parent item boolean false
prefixel Prefix element node or a function to render it. (hovered: boolean) => React.ReactNode / React.ReactNode -
prefixVisibilityTrigger Trigger for displaying the prefix element default / hover default
size Size of the item. Affects the maximum and minimum height. default / large default
suffixel Suffix element node or a function to render it. (hovered: boolean) => React.ReactNode / React.ReactNode -
suffixVisibilityTrigger Trigger for displaying the suffix element default / hover default
subMenu Array of nested items MenuItemProps[]
text Text displayed inside the item string / React.ReactNode -
type Type of the item default / select / danger default

MenuTexts

Property Description Type Default
showLess toggle button label ReactNode -
showMore toggle button label ReactNode -

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
0.20.6189latest

Version History

VersionDownloads (Last 7 Days)Published
0.20.6189
0.20.57
0.20.41
0.20.30
0.20.21
0.20.10
0.20.00
0.19.160
0.19.150
0.19.140
0.19.130
0.19.120
0.19.110
0.19.100
0.19.90
0.19.80
0.19.70
0.19.60
0.19.50
0.19.40
0.19.30
0.19.20
0.19.10
0.19.00
0.18.230
0.18.220
0.18.210
0.18.200
0.18.190
0.18.180
0.18.170
0.18.160
0.18.150
0.18.140
0.18.130
0.18.120
0.18.110
0.18.100
0.18.90
0.18.80
0.18.70
0.18.60
0.18.50
0.18.40
0.18.30
0.18.20
0.18.10
0.18.00
0.17.200
0.17.190
0.17.180
0.17.170
0.17.160
0.17.150
0.17.140
0.17.130
0.17.120
0.17.110
0.17.100
0.17.90
0.17.80
0.17.70
0.17.60
0.17.50
0.17.40
0.17.30
0.17.20
0.17.10
0.17.00
0.16.00
0.15.80
0.15.70
0.15.60
0.15.50
0.15.40
0.15.10
0.15.00
0.14.00
0.13.21
0.13.10
0.13.00
0.12.50
0.12.40
0.12.30
0.12.20
0.12.10
0.12.00
0.11.60
0.11.50
0.11.40
0.11.30
0.11.20
0.11.10
0.11.00
0.10.450
0.10.440
0.10.430
0.10.420
0.10.410
0.10.400
0.10.390
0.10.380
0.10.370
0.10.350
0.10.360
0.10.340
0.10.330
0.10.320
0.10.310
0.10.300
0.10.290
0.10.280
0.10.270
0.10.260
0.10.230
0.10.200
0.10.190
0.10.180
0.10.170
0.10.160
0.10.150
0.10.140
0.10.130
0.10.120
0.10.110
0.10.100
0.10.90
0.10.80
0.10.70
0.10.60
0.10.50
0.10.40
0.10.30
0.10.20
0.10.10
0.10.00
0.9.00
0.8.40
0.8.20
0.8.10
0.8.00
0.7.200
0.7.190
0.7.180
0.7.170
0.7.160
0.7.150
0.7.140
0.7.130
0.7.120
0.7.110
0.7.100
0.7.90
0.7.80
0.7.70
0.7.60
0.7.50
0.7.40
0.7.30
0.7.20
0.7.10
0.6.160
0.6.150
0.6.140
0.6.130
0.6.120
0.6.110
0.6.100
0.6.80
0.6.70
0.6.60
0.6.50
0.6.40
0.6.30
0.6.20
0.6.10
0.6.00
0.5.270
0.5.260
0.5.250
0.5.240
0.5.230
0.5.220
0.5.210
0.5.200
0.5.190
0.5.180
0.5.170
0.5.160
0.5.150
0.5.140
0.5.130
0.5.120
0.5.110
0.5.100
0.5.90
0.5.80
0.5.70
0.5.60
0.5.50
0.5.40
0.5.30
0.5.20
0.5.10
0.5.00
0.4.20
0.4.10
0.4.00
0.3.60
0.3.50
0.3.40
0.3.30
0.3.20
0.3.10
0.3.00
0.2.20
0.2.10
0.2.00
0.1.40
0.1.30
0.1.20
0.1.10
0.1.00
0.0.70
0.0.60
0.0.50
0.0.40
0.0.30
0.0.10
0.0.20

Package Sidebar

Install

npm i @synerise/ds-menu

Repository

github.com/Synerise/synerise-design

Homepage

github.com/Synerise/synerise-design#readme

Weekly Downloads

196

Version

0.20.6

License

ISC

Unpacked Size

180 kB

Total Files

56

Last publish

Collaborators

  • synerise
Try on RunKit
Report malware