droplr-react-ui

A responsive UI library for React web applications.

Usage no npm install needed!

<script type="module">
  import droplrReactUi from 'https://cdn.skypack.dev/droplr-react-ui';
</script>

README

droplr-react-ui

A responsive UI library for React web applications.

Table of Contents

Buttons

Dropdowns

Forms

Library

Components

To use components you can import them like this (e.g. Button component):

import { Button } from 'droplr-react-ui';

Button

Props Default Props notes
children - String empty string The text that will appear as a button's content.
type - String required The button's visual type. Accepts primary and secondary.
buttonType - String button The HTML button's type attribute. Accepts button, submit and reset.
Icon - React Component null A React Component that will render a SVG icon.
onClick - Function empty function The button's callback. A function that will be executed after a click event.
className - String empty string The button's additional class name.
disabled - Boolean false If true, the button will appear in the disabled mode and will be unable to be clicked.
loading - Boolean false If true, the button will appear in the loading mode and will be unable to be clicked.
maxWidth - Boolean false If true, the button's width will increase to the 100% of it's container's width.
dropdown - Boolean false If true, the button will appear with the dropdown icon on the right side.

DualButton

Props Default Props notes
type - String 'primary' The button's visual type. Accepts primary and secondary.
className - String empty string The button's additional class name.
maxWidth - Boolean false If true, the button's width will increase to the 100% of it's container's width.
left - Object required { An object containing properties for the left button.
Icon - React Component null A React Component that will render a SVG icon.
onClick - Function empty function The button's callback. A function that will be executed after a click event.
className - String empty string The button's additional class name.
disabled - Boolean false If true, the button will appear in the disabled mode and will be unable to be clicked.
loading - Boolean false If true, the button will appear in the loading mode and will be unable to be clicked.
maxWidth - Boolean maxWidth If true, the button's width will increase to the 100% of it's container's width.
dropdown - Boolean false If true, the button will appear with the dropdown icon on the right side.
text - String empty string The text that will appear as a button's content.
}
right - Object required { An object containing properties for the right button.
Icon - React Component null A React Component that will render a SVG icon.
onClick - Function empty function The button's callback. A function that will be executed after a click event.
className - String empty string The button's additional class name.
disabled - Boolean false If true, the button will appear in the disabled mode and will be unable to be clicked.
loading - Boolean false If true, the button will appear in the loading mode and will be unable to be clicked.
maxWidth - Boolean maxWidth If true, the button's width will increase to the 100% of it's container's width.
dropdown - Boolean false If true, the button will appear with the dropdown icon on the right side.
text - String empty string The text that will appear as a button's content.
}

DropdownItem

Props Default Props notes
title - String required The text displayed in the dropdown item.
TitleIcon - React Component null An icon displayed after the title.
description - Node element empty string Description displayed under the title.
Icon - React Component null An icon displayed before the title.
className - String empty string Dropdown item's additional class name.
active - Boolean false Indicates that the item is active with a check mark. Works only with showItemStatus = true.
onClick - Function empty function A function that will be executed after a click event.
href - String empty string Makes the dropdown item a link and uses passed prop as a href attribute.
target - String empty string Passes the prop to the element's target attribute.
showItemStatus - Boolean false If true, will display the check mark inside the dropdown item that has a prop active set to true.
disabled - Boolean false If true, the dropdown item will appear in the disabled mode and will be unable to interact with.
closeDropdown - Function empty function A function that will close the dropdown.
closeOnItemClick - Boolean false If true, will trigger the function from the closeDropdown prop after clicking on the item.

Dropdown

Props Default Props notes
isActive - Boolean required If true, it shows up itself. Hidden when false.
children - Node Element Elements or components that will be displayed as dropdown items.
or array of Node Elements
or Function
or array of Functions
header - String empty string The text displayed at the top of the dropdown.
className - String empty string Dropdown's additional class name.
showItemStatus - Boolean false If true, will display the check mark inside the dropdown item that has a prop active set to true.
close - Function empty function A function that will close the dropdown.
closeOnItemClick - Boolean false If true, will trigger the function from the close prop after clicking on the item.
onMouseLeave - Function empty function Function that will be executed when mouse leaves the dropdown component

DropdownWithToggler

Props Default Props notes
Toggler - React Component required A component that will display as dropdown toggler, e.g. a button.
onClick - Function empty function A function that will be executed after a click event is fired on the toggler.
header - String empty function Callback function on onMouseLeave event.
className - String empty string DropdownWithToggler's additional class name.
isActive - Boolean false If true, the dropdown will be open after the component mounts.
closeOnItemClick - Boolean false If true, the dropdown will close after clicking on a dropdown item.
showItemStatus - Boolean false If true, the dropdown will display the check mark inside the dropdown item that has a prop active set to true.
closeOnMouseLeave - Boolean false Dropdown will be closed when mouse leaves it.
onMouseLeave - Function false Dropdown will be closed when mouse leaves it.
children - Node Element required Elements or components that will be displayed as dropdown items.
or array of Node Elements
or Function
or array of Functions
setRef - Function empty function A function that should set a reference to a custom container if we want the dropdown to position itself in reference to it instead of the window.

Input

Props Default Props notes
name - String required Input's name attribute.
className - String empty string Input's additional class name.
type - String 'text' Input's type attribute.
value - String empty string Input's value attribute.
placeholder - String empty string Input's placeholder attribute.
label - String empty string Input's label text.
sublabel - String empty string Input's sublabel text.
info - String empty string Input's description displayed as a text paragraph under the input.
error - String empty string Input's validation error message.
autoFocus - Boolean false Input's autoFocus attribute.
readOnly - Boolean false If true, the input will appear in the read-only mode, allowing only to read and copy the input's value.
disabled - Boolean false If true, the input will appear in the disabled mode and will be unable to interact with.
passwordVisibilityToggle - Boolean false If true, adds a button inside the input to toggle the password's visibility. Works only if type = 'password'.
passwordVisible - Boolean false If true, the password input's value will render as visible.
onBlur - Function empty function A function that will be executed after input's onBlur event triggers.
onFocus - Function empty function A function that will be executed after input's onFocus event triggers.
onKeyPress - Function empty function A function that will be executed after input's onKeyPress event triggers.
onChange - Function empty function A function that will be executed after input's onChange event triggers.

Switch

Props Default Props notes
label - String empty string Switch'es label text.
labelPosition - String 'left' The switch'es label position. Accepts top, right, bottom and left.
checked - Boolean false The switch'es visual state. If true, it will appear as checked / active.
disabled - Boolean false If true, the switch will appear in the disabled mode and will be unable to be clicked.
onChange - Function empty function A function that will be executed after input's onChange event triggers.
className - String empty string The switch'es additional class name.

Icons

To use icons you can import them like this (e.g. DownloadIcon):

import { DownloadIcon } from 'droplr-react-ui/icons';

Storybook

The storybook contains all of the components in different states and all of the icons. It helps you to understand how they work and how to use them.

To use our Storybook you can run it with this command:

npm run storybook