droplr-react-ui-v2

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

Table of contents

• 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

Components

Button

▸ Button(props): Element

Component

Desc

The button component

Parameters

| Name | Type | Description | | :------ | :------ | :------ | | props | ButtonProps | The component props, instance of ButtonProps |

Returns

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 |

Example

<Button 
    label='Button' 
    onClick={clickHandler} 
    variant='secondary' 
    size='large' />

Input

▸ Input(Component): Element

Desc

Input component

Parameters

| Name | Type | Description | | :------ | :------ | :------ | | Component | InputProps | props |

Returns

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 |

Example

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

▸ Dropdown(Component): Element

Desc

Dropdown component

Parameters

| Name | Type | Description | | :------ | :------ | :------ | | Component | DropdownProps | props |

Returns

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| | dropdownTopOffset| number optional | Offsets the top 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) |

Example

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)}} />

Defined in

components/Dropdown/Dropdown.tsx:173

DroplrThemeProvider

Parameters

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

Example

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

Icon

▸ Icon(props): Element

Parameters

| Name | Type |Description | | :------ | :------ | :------ | | props | IconProps | The Icon component props, instance of IconProps |

Returns

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 |

Example

<Icon 
    name={'Add'} 
    size={12} 
    color={'#000'} 
    stroke={0.75} />

Switch

▸ Switch(props): Element

Desc

Switch component

Parameters

| Name | Type | | :------ | :------ | | props | SwitchProps |

Returns

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|

Example

<Switch 
    checked={true} 
    label='My Switch' 
    onChange={onChangeHandler} />

TextSwitch

▸ TextSwitch(props): Element

Desc

TextSwitch component

Parameters

| Name | Type | | :------ | :------ | | props | TextSwitchProps |

Returns

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 |

Example

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

▸ Tooltip(props): Element

Desc

The Tooltip component

Parameters

| Name | Type | | :------ | :------ | | props | TooltipProps |

Returns

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|

Example

// 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

▸ Badge(props): Element

Desc

The Badge component

Parameters

| Name | Type | | :------ | :------ | | props | BadgeProps |

Returns

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 |

Example

<Badge variant="info" label="My Badge" />

Toast

▸ Toast(props): Element

Desc

The Toast component and its wrapper

Parameters

| Name | Type | | :------ | :------ | | props | ToastProps |

Returns

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 |

Example

// 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

▸ RadioButton(props): Element

Desc

The RadioButton component

Parameters

| Name | Type | | :------ | :------ | | props | RadioButtonprops |

Returns

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 |

Example

<RadioButton
checked={isChecked}
onClick={() => {setIsChecked(!isChecked)}}
variant="primary"
/>

ThumbnailSwitch

▸ ThumbnailSwitch(props): Element

Desc

ThumnailSwitch component

Parameters

| Name | Type | | :------ | :------ | | props | ThumbnailSwitchProps |

Returns

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} />