Description

Description UI Component

Installation

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

Usage

import Description, {DescriptionRow} from '@synerise/ds-description';
<Description type='inline'>
<DescriptionRow label="Name" value="John Kowalski" prefixEl="Mr" suffix="<Avatar>JK</Avatar>" />
</Description>

Demo

API

Description

PropertyDescriptionTypeDefault
typeType of description: table - description will looks like vertical table, inline - value will aligns to label, dotted-list - list with dots as prefix, without label, numbered-list - counted list, without labelstable/ inline/ dotted-list/ numbered-listtable
ratioDefine size of column if type='table'20-80/ 30-70/ 40-60/ 50-50/ 60-40/ 70-30/ 80-2030-70

DescriptionRow

PropertyDescriptionTypeDefault
labelLabel of description rowstring-
labelIconIcon visible before row labelReact.ReactNode-
valueValue of description rowstring / React.ReactNode-
prefixElElement rendered before valuestring / React.ReactNode-
suffixElElement rendered after valuestring / React.ReactNode-
copyValueWhether to render copy icon on the end of rowstring-
starTypeWhether to render star before value, and type of startactive, inactive-