@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

4 months ago

4 months ago

4 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

1 month ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

7 months ago

7 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

1 year ago

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

11 months ago

11 months ago

10 months ago

11 months ago

12 months ago

1 year ago

11 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

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago