Droplr-react-ui-v2 NPM

droplr-react-ui-v2

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

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

Example

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

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

Icons

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

@infinitebrahmanuniverse/nolb-dro @zalastax/nolb-dro @everything-registry/sub-chunk-1516

8 days ago

10 days ago

15 days ago

15 days ago

15 days ago