The up-to-date touch-up to Droplr's react UI Library.
| Name | Type | Description |
| :------ | :------ | :------ |
| theme | string | Switches the theme for the components wrapped in the provider.
Options:
light dark
Default: light |
<DroplrUIProvider theme={'light'}>
<App />
</DroplrUIProvider>
▸ Button(props): Element
Component
Desc
The button component
| Name | Type | Description |
| :------ | :------ | :------ |
| props | ButtonProps | The component props, instance of ButtonProps |
Element
▸ ButtonProps: Interface
| Name | Type | Description |
| :------ | :------ | :------ |
| label | string
required | The label on the button |
| onClick | Function
optional | The click handler function for the button |
| className | string
optional | Appends custom class name |
| variant | string
optional | Style variants of the button,
Options primary secondary success info warning alternative danger transparent
Default: primary|
| size| string
optional | Size variants of the button
Options
small medium large
Default: medium|
| disabled | boolean
optional | Sets the button to the disabled state.
Default: false|
| loading | boolean
optional | Renders a spinner over the button
Default: false |
| icon | Icon
optional | Renders an icon before the label text |
<Button
label='Button'
onClick={clickHandler}
variant='secondary'
size='large' />
▸ Input(Component): Element
Desc
Input component
| Name | Type | Description |
| :------ | :------ | :------ |
| Component | InputProps | props |
Element
▸ InputProps: Interface
| Name | Type | Description |
| :------ | :------ | :------ |
| value | string
optional | The default value of the input field |
| type | string
optional | The input field type,
Options text password number Default: text|
| className | string
optional | Appends custom class name |
| label | string
optional | The label above the input field |
| sublabel | string
optional | A smaller label under the {label} prop |
| disabled | boolean
optional | Disables the component |
| placeholder | string
optional | The placeholder text of the input field |
| info | string
optional | Small informative text under the input field |
| error | string
optional | Displays an error message under the input field |
| autoFocus | boolean
optional | Autofocuses the input field |
| readOnly | boolean
optional | Makes the component uneditable |
| passwordVisible | boolean
optional | Initial visibility state for password fields. When type is "password", shows a toggle icon that switches between showing and hiding the password text |
| icon |
optional | An optional icon shown on the right-hand side |
| onBlur | function
optional | Event handler for the 'onBlur' event |
| onFocus | function
optional | Event handler for the 'onFocus' event |
| onKeyPress | function
optional | Event handler for the 'onKeyPress' event |
| onChange | function
optional | Event handler for the 'onChange' event |
const onChange = (e) => {
// Gets the text from the input field
handleInput(e.target.value);
};
// Basic text input
<Input
value={'My Input Component'}
type={'text'}
autoFocus
info={'Please fill out the form'}
onChange={onChange}/>
// Password input with visibility toggle
<Input
type={'password'}
value={'mySecretPassword'}
label={'Password'}
passwordVisible={false} // Initially hidden
onChange={onChange}/>
▸ Dropdown(Component): Element
Desc
Dropdown component
| Name | Type | Description |
| :------ | :------ | :------ |
| Component | DropdownProps | props |
Element
▸ DropdownProps: Interface
| Name | Type | Description |
| :------ | :------ | :------ |
| items | Array
required | The list of the dropdown items
Instances of DropdownItemProps |
| selectedOption | DropdownItem
required | The selected item from the provided items array |
| label | string
required | The label of the dropdown |
| parentElement | Element
optional | Replaces the default input field with the provided element and attaches the dropdown onto it |
| className | string
optional | Appends custom class name |
| disabled | boolean
optional | Sets the dropdown input field to the disabled state. No effect if the parentElement is provided
Default: false|
| loading | boolean
optional | Renders a loading spinner over the dropdown input field. No effect if the parentElement is provided|
| align | left right
optional | Aligns the item to the left or right side of the parent trigger |
| minWidth| pixel-format string, ie. 12px
optional | Sets the minimum width for the input field
Default: auto|
| inputWidth| pixel-format string, ie. 12px
optional | Sets the width for the input field
Default: auto|
| maxWidth| pixel-format string, ie. 12px
optional | Sets the maximum width for the dropdown list
Default: auto|
| maxHeight| pixel-format string, ie. 12px
optional | Sets the maximum height for the dropdown list
Default: 300px|
| matchListWidthToInput| boolean
optional | Matches the dropdown list width to the width of the input field|
| textAlign| start center end
optional | Positions the title text of the dropdown list items|
| offsetPosition| number
optional | Offsets the vertical alignment of the dropdown list
Default: 0|
| offsetAlign| number
optional | Offsets the horizontal alignment of the dropdown list
Default: 0|
| closeOnMouseOut| boolean
optional | Closes the dropdown when the mouse leaves the list
Default: true|
| closeOnClickOutside| boolean
optional | Closes the dropdown when the mouse clicks outside of list
Default: true|
| showItemStatus | boolean
optional | Shows a checkmark icon next to selected items
Default: false |
| showItemStatus | boolean
optional | Shows a checkmark icon next to selected items
Default: false |
| showItemStatus | boolean
optional | Shows a checkmark icon next to selected items
Default: false |
| withInput | boolean
optional | Toggles the input field
Default: false |
| inputLoading | boolean
optional | Shows the input field loader (requires withInput)
Default: false |
| onInputChanged | Function
optional | Callback for input changed events (requires withInput) |
▸ DropdownItemProps: Interface
| Name | Type | Description |
| :------ | :------ | :------ |
| id | any
optional | An optional identifier for an item |
| title | string
required | The title of the list item |
| type | ITEM HEADER SPLITTER
optional | The type of the list item. Splitters are a simple border break and a header displays its title prop |
| description | string
optional | The description of the list item |
| disabled | boolean
optional | Sets the list item to the disabled state.
Default: false|
| className | string
optional | Appends custom class name |
| color | string
optional | Colors the title prop of the item |
| icon | Icon
optional | Renders an icon before the title text of the list item |
| onClick | Function
required | The click handler function for the list item.
Provides the currently selected item as the argument (typeof DropdownItemProps) |
const dropdown_items: Array<DropdownItemProps> = [{
title: 'My list item - one',
icon: <Icon name='Calendar' size={12} />,
onClick: itemClickHandler(),
disabled: false,
},{
title: 'A new section',
type: 'HEADER',
},{
title: 'My list item - two',
description: 'My item's description',
icon: <Icon name='List' size={12} />,
onClick: itemClickHandler(),
disabled: true,
}];
<Dropdown items={dropdown_items} selectedOption={dropdownSelectedOption} label='My Dropdown' closeOnMouseOut={false} onClick={(item) => {setSelectedOption(item)}} />
components/Dropdown/Dropdown.tsx:173
▸ Icon(props): Element
| Name | Type |Description |
| :------ | :------ | :------ |
| props | IconProps | The Icon component props, instance of IconProps |
Element
▸ IconProps: Interface
| Name | Type | Description |
| :------ | :------ | :------ |
| name | string
required | The name of the icon
Options
Add AddPeople AddToBoard Alert AlignCenter AlignLeft AlignRight AllItems Arrow Audio Back Bell Binoculars Board Bold Browser BrowserTab CalendarTime Calendar Camera Cancel CheckCircle Check ChevronDown ChevronRight ChevronDown ChevronLeft Chrome Clipboard Close CloudUpload Code CodeBlock Comment CreateBoard Crop Cross CrossBold Cut Dashboard Delete Destruct DetachBoard Disable Documents Dots Down Download Draw DropdownDown DropdownUp Edit Elements Enable EntirePage Error ExpireTime EyeOff Eye Face Facebook FileText FileZip Folder FullScreen FullDesktop Gear HeadlineFirst HeadlineSecond Heart Hyperlink Image Info Italic Key LayoutGrid LayoutList Link LockOpen Lock Logout Mail Markdown Money More Move NewWindow Nib Notes NotesBold Notification OrderArrow OrderedList Others PadlockLock PadlockUnlock Paragraph Pause Pen Phone Photo PhotoCamera Play Plugin PlusToBoard Private Profile Public PublicFolder QuestionMark Quote Redo Refresh RemoveTag Resume Save Screenrecording Search SearchBold SelectedArea Send Separator Share Shared Sort Star Success TagFilled Tags Task Team Terminal TrashBin Twitter Typography Underline Undo UnorderedList Up Upload UploadFile Url VerticalDots Video VideoCam VideoCamPlus ViewGrid ViewList Wallet Warning WatchFolder Window Zip ZoomIn ZoomOut ZoomReset |
| className | string
optional | Appends custom class name |
| style | CSSProperties
optional | Appends a custom style to the icon component|
| size| number
optional | Pixel-size of the icon
Default: 14|
| stroke | string
optional | Sets the stroke width for the icon
Default: 1|
| color | string
optional | The color of the icon
Default: gray |
<Icon
name={'Add'}
size={12}
color={'#000'}
stroke={0.75} />
▸ Switch(props): Element
Desc
Switch component
| Name | Type |
| :------ | :------ |
| props | SwitchProps |
Element
▸ SwitchProps: Interface
| Name | Type | Description |
| :------ | :------ | :------ |
| label | string
optional | The label of the component |
| labelPosition | string
optional | The position of the label
Options
top bottom left right|
| className | string
optional | Appends custom class name |
| checked | boolean
required | The state of the switch component |
| disabled | boolean
optional | Sets the component to the disabled state.
Default: false|
| onChange | Function
optional | The function that handles the change of state. Passes the current state as arg, typeof boolean|
<Switch
checked={true}
label='My Switch'
onChange={onChangeHandler} />
▸ TextSwitch(props): Element
Desc
TextSwitch component
| Name | Type |
| :------ | :------ |
| props | TextSwitchProps |
Element
▸ TextSwitchComponentProps: Interface
| Name | Type | Description |
| :------ | :------ | :------ |
| items | Array
required | The list of the switch control items
Instances of TextSwitchItemProps |
| label | string
required | The label of the component |
| className | string
optional | Appends custom class name |
| defaultIndex | number or string
optional | Index (or label) of the default selected item in the switch
Default: 0|
| disabled | boolean
optional | Sets the component to the disabled state.
Default: false|
| onChange | Function
optional | The function that handles the change of state. Passes the currently active item as arg, typeof TextSwitchItemProps|
▸ TextSwitchItemProps: Interface
| Name | Type | Description |
| :------ | :------ | :------ |
| id | number
required | The ID of the switch item |
| label | string
required | The label of the switch item |
| icon | Icon
optional | Appends an icon in front of the label |
const switch_items = items: [
{
id: 0,
label: 'Option One'
}, {
id: 1,
label: 'Option Two'
}, {
id: 2,
label: 'Option Three'
icon: <Icon name={'Clipboard'} />
}
];
<TextSwitch
items={switch_items}
label='My Switch'
onChange={onChangeHandler} />
▸ Tooltip(props): Element
Desc
The Tooltip component
| Name | Type |
| :------ | :------ |
| props | TooltipProps |
Element
▸ TooltipProps: Interface
| Name | Type | Description |
| :------ | :------ | :------ |
| content | any required | The content of the tooltip, ideally text |
| onTooltipShow | Function
optional | The callback for when the tooltip is shown |
| onTooltipHide | Function
optional | The callback for when the tooltip is hidden |
| position | top, bottom
optional | The placement of the tooltip with regards to the element it is wrapping
Default: top|
| align | left, right
optional | The alignment of the tooltip relative to the children|
| hideDelay | number
optional | The delay (in ms) before hiding the tooltip
Default: 250|
| fontSize | string
optional | Font size of the tooltip's content|
| customStyle | Object
optional | Custom styles forwarded to the tooltip component|
| animated | boolean
optional | Animates the tooltip's entry and exit|
| offsetPosition | number
optional | Vertical offset|
| offsetAlign | number
optional | Horizontal offset|
| closeOnClick | boolean
optional | Enables closing the tooltip on click, defaults to false|
// A simple tooltip
<Tooltip content={"Hooray!"}>
Hover over me!
</Tooltip>
// A tooltip with a few custom properties
<Tooltip
title={"Hey!"}
content={"I'm down here!}
position="bottom"
hideDelay={500}
onTooltipHide={() => console.log("Bye!")}
>
Hover over me!
</Tooltip>
▸ Badge(props): Element
Desc
The Badge component
| Name | Type |
| :------ | :------ |
| props | BadgeProps |
Element
▸ BadgeProps: Interface
| Name | Type | Description |
| :------ | :------ | :------ |
| variant | primary secondary success info warning alternative danger
Default: primary required | The variant of the badge component |
| label | string
required | The text within the badge |
<Badge variant="info" label="My Badge" />
▸ Toast(props): Element
Desc
The Toast component and its wrapper
| Name | Type |
| :------ | :------ |
| props | ToastProps |
Element
▸ NewToastProps: Interface
| Name | Type | Description |
| :------ | :------ | :------ |
| message | string required | The content of the toast message |
| title | string | The title of the toast message |
| variant | success, error, warning , info | The color variant of the toast message |
| icon | Icon | The icon to be shown on the left side of the toast |
| duration | number | The duration (in ms) of the Toast element
Default: 5000 |
| withProgressBar | boolean | Shows a progress bar at the bottom of the toast |
| clickToDismiss | boolean | Enables dismissing the toast by clicking on it |
| onClick | Function | Triggers this callback if the Toast notification is clicked |
// The wrapper around the app's root
<WithToast>
<App />
</WithToast>
// You can add a top-side offset to the provider on a global level, ie. to avoid headers
<WithToast offsetTop={128}>
<App />
</WithToast>
// Spawn the toast message
InfoToast({
message: "This is a toast message.",
title: "A test toast title. Have fun!",
duration: 7500,
clickToDismiss: true,
onClick: () => console.log("I've been clicked away!");
});
▸ RadioButton(props): Element
Desc
The RadioButton component
| Name | Type |
| :------ | :------ |
| props | RadioButtonprops |
Element
▸ RadioButtonProps: Interface
| Name | Type | Description |
| :------ | :------ | :------ |
| className | string | Appends additional class names to the component |
| checked | boolean | The checked state of the component |
| variant | success, danger, warning , secondary | The color variant of the component |
| disabled | boolean | Disables the component, becomes uninteractive |
| onClick | Function | The click handler for the component |
<RadioButton
checked={isChecked}
onClick={() => {setIsChecked(!isChecked)}}
variant="primary"
/>
▸ ThumbnailSwitch(props): Element
Desc
ThumnailSwitch component
| Name | Type |
| :------ | :------ |
| props | ThumbnailSwitchProps |
Element
▸ ThumbnailSwitchComponentProps: Interface
| Name | Type | Description |
| :------ | :------ | :------ |
| items | Array
required | The list of the switch control items
Instances of TextSwitchItemProps |
| label | string
required | The label of the component |
| className | string
optional | Appends custom class name |
| defaultIndex | number or string
optional | Index (or label) of the default selected item in the switch
Default: 0|
| disabled | boolean
optional | Sets the component to the disabled state.
Default: false|
| onChange | Function
optional | The function that handles the change of state. Passes the currently active item as arg, typeof ThumbnailSwitchItemProps|
▸ ThumbnailSwitchItemProps: Interface
| Name | Type | Description |
| :------ | :------ | :------ |
| id | number
required | The ID of the switch item |
| label | string
required | The label of the switch item |
| icon | Icon
optional | Adds an icon to the top portion of the switch |
const switch_items = items: [
{
id: 0,
label: 'Option One',
icon: <Icon name={'RemoveTag'} />
}, {
id: 1,
label: 'Option Two',
icon: <Icon name={'Delete'} />
}, {
id: 2,
label: 'Option Three',
icon: <Icon name={'Clipboard'} />
}
];
<ThumbnailSwitch
items={switch_items}
label='My Switch'
onChange={onChangeHandler} />