@synerise/ds-list-item NPM

id: list-item

title: ListItem

ListItem UI Component

Installation

npm i @synerise/ds-list-item
or
yarn add @synerise/ds-list-item

Usage

import ListItem from '@synerise/ds-list-item'

<ListItem />

Demo

API

Property	Description	Type	Default
className	Extra styles	string	-
children	ListItem content	React.ReactNode	-
checked	for type="select" it renders a check icon as suffix, for other types only an additional classname	`boolean`	-
copyable	Allow copying value by clicking	`boolean`	-
copyHint	Content that disaplys on hover if copyable	`ReactNode`	-
copyValue	Value that gets copied to clipboard	`string`	-
copyTooltip	Content displayed in tooltip after copying	`ReactNode`	-
description	2nd line of content in item	`ReactNode`	-
disabled	renders disabled / unclickable item	`boolean`	-
higher	Applies to `type "divider"` only	`boolean`	-
highlight	string to highlight in items	`string`	-
hoverTooltipProps	Props for hover tooltip. see rc-trigger for details	`TriggerProps & { ref?: React.LegacyRef<TriggerHandle> }`	-
key	unique key	`string / number`	-
level	Applies to `type "divider"` only	`number`	-
onItemHover	hoverHandler	`(item: ItemData<MouseEvent<HTMLDivElement>>) => void`	-
onClick	onClick handler	`(item: ItemData<MouseEvent<HTMLDivElement>>) => void`	-
ordered	renders ordinal numbers in items	`boolean`	-
parent	if true will display an arrow icon next to label	`boolean`	-
prefixel	prefix element	`ReactNode` \| `AddonRenderer`	-
prefixVisibilityTrigger	drives prefix visibility	`'hover'` \| `'default'`	-
renderHoverTooltip	Tooltip to display on item hover	`() => JSX.Element`	-
size	height of the item	`'default'` \| `'large'`	'default'
suffixel	suffix element. Item with type="select" and checked also displays a check icon	`ReactNode` \| `AddonRenderer`	-
suffixVisibilityTrigger	drives suffix visibility	`'hover'` \| `'default'`	-
text	prop alternative to `children`	`ReactNode`	-
timeToHideTooltip	copy tooltip delay	`number`	-
title	title attribute (a11y prop)	`string`	-
tooltipProps	Tooltip props for "copied" tooltip. See @synerise/ds-tooltip	`TooltipProps`	-
type	Type of the list item	`"default"` \| `"danger"` \| `"divider"` \| `"select"`	-

AddonRenderer

    type AddonRenderer = (hovered: boolean) => ReactNode;

ItemData

prop passed to onClick and onItemHover handlers

Property	Description	Type
key	item key	string
item	clicked / hovered item data	Partial
domEvent	Event triggered	`MouseEvent<HTMLDivElement>`

@synerise/ds-icon @synerise/ds-tooltip @synerise/ds-utils copy-to-clipboard rc-trigger uuid

@everything-registry/sub-chunk-890 @synerise/ds-cascader @synerise/ds-collector @synerise/ds-confirmation @synerise/ds-context-selector @synerise/ds-date-range-picker @synerise/ds-factors @synerise/ds-inline-edit @synerise/ds-item-picker @synerise/ds-format-picker @synerise/ds-items-roll @synerise/ds-operators @synerise/ds-subject @synerise/ds-tagslist @synerise/design-system

3 months ago

3 months ago

3 months ago

26 days ago

1 month ago

1 month ago

2 months ago

2 months ago

3 months ago

3 months ago

15 days ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

6 months ago

7 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

10 months ago

1 year ago

9 months ago

9 months ago

1 year ago

12 months ago

12 months ago

12 months ago

10 months ago

11 months ago

10 months ago

10 months ago

11 months ago

12 months ago

11 months ago

11 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

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago