Subject

Subject UI Component

Installation

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

Usage

import Subject from '@synerise/ds-subject'
<Subject
texts={{
noResults: 'No results',
searchPlaceholder: 'Search'
}}
onSelectItem={(item) => {}
onShowPreview={() => {}}
type='event'
placeholder='Choose event'
iconPlaceholder={<VarTypeStringM />}
selectedItem={undefined}
items={[
{
id: 1,
name: `Attribute 1`,
icon: <NotificationsM />,
},
{
id: 2,
name: `Attribute 2`,
icon: <NotificationsM />,
}
]}
/>

Demo

API

PropertyDescriptionTypeDefault
iconPlaceholderIcon for empty selected itemReact.ReactNode-
itemsArray of available subjectsSubjectItem[][]
placeholderPlaceholder for empty selected itemstring \ React.ReactNode;-
selectedItem?Selected itemSubjectItem \ undefined;undefined
onSelectItemCallback called when user select new subject( SubjectItem) => void;-
onShowPreviewCallback called when user clicks on Show Preview button() => void \ undefined-
textsObject with translationsTEXTS-
type?Type of subject parameter \ context \ eventSubjectTypeparameter

SubjectItem

PropertyDescriptionTypeDefault
iconIcon of subject itemReact.ReactNode-
idId of subject itemReact.ReactText-
nameName of subject itemstring-

TEXTS

PropertyDescriptionTypeDefault
noResultsNo results infostring-
searchPlaceholderSearch box placeholderstring-