The up-to-date touch-up to Droplr's react UI Library.

• Button
  • ButtonProps
  • Example
• Input
  • InputProps
  • Example
• Dropdown
  • DropdownProps
  • DropdownItemProps
  • Example
• DroplrThemeProvider
  • Example
• Icon
  • IconProps
  • Example
• Switch
  • SwitchProps
  • Example
• TextSwitch
  • TextSwitchProps
  • TextSwitchItemProps
  • Example
• Tooltip
  • TooltipProps
  • Example
• Badge
  • BadgeProps
  • Example
• Toast
  • ToastProps
  • Example
• RadioButton
  • RadioButtonprops
  • Example
• ThumbnailSwitch
  • ThumbnailSwitchProps
  • ThumbnailSwitchItemProps
  • Example

▸ 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	Shows or hides 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);
};

<Input 
    value={'My Input Component' }
    type={'text'} 
    autoFocus 
    info={'Please fill out the form'} 
    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
label	string required	The label of the dropdown
className	string optional	Appends custom class name
defaultIndex	number optional	Index of the default selected item in the items array. Default: 0
disabled	boolean optional	Sets the dropdown input field to the disabled state. Default: false
fullWidth	boolean optional	Has the dropdown input field occupy the full width of its parent Default: false
minWidth	pixel-format string, ie. 12px optional	Sets the minimum width for the input field Default: 0px
closeOnMouseOut	boolean optional	Closes the dropdown when the mouse leaves the list Default: true
closeOnItemClick	boolean optional	Closes the dropdown when an option in selected Default: true
showItemStatus	boolean optional	Shows a checkmark icon next to selected items Default: false
onMouseLeave	Function optional	Handler function for when the mouse leaves the dropdown

▸ DropdownItemProps: Interface

Name	Type	Description
title	string required	The title 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)
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
icon	Icon optional	Renders an icon before the title text of the list item
href	string optional	The href attribute target for the item click
target	string optional	The target attribute target for the item click
showItemStatus	boolean optional	Shows a checkmark icon next to selected item Default: false
active	boolean optional	Sets the item to active state by default Default: false

const dropdown_items: Array<DropdownItemProps> = [{
    title: 'My list item - one',
    icon: <Icon name='Calendar' size={12} />,
    onClick: itemClickHandler(),
    disabled: false,
    },{
    title: 'My list item - two',
    description: 'My item's description',
    icon: <Icon name='List' size={12} />,
    onClick: itemClickHandler(),
    disabled: true,
}];
<Dropdown items={dropdown_items} label='My Dropdown' closeOnMouseOut={false} />

components/Dropdown/Dropdown.tsx:173

---

Name	Type	Description
theme	string	Switches the theme for the components wrapped in the provider. Options: light dark Default: light

<DroplrThemeProvider theme={'light'}>
      <App />
</DroplrThemeProvider>

---

▸ 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, left, right optional	The placement of the tooltip with regards to the element it is wrapping Default: top
hideDelay	number optional	The delay (in ms) before hiding the tooltip Default: 250
title	string optional	The title text of the tooltip
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} />