@deskpro/react-components
A react-based set of components for building DeskPRO apps.
Common
Forms
Buttons
Columns
Tabs
Cards
Badges
Props
Numbers
Strings
Regexp
Objects
Dates
DOM
CSSOverview
A Storybook demo is available online at https://deskpro.github.io/react-components.
Components
Renders a notification message.
Renders an icon using the Font Awesome library.
Renders an avatar image.
Renders a message in a box which is colored to match an urgency level between 1 and 10.
Renders a progress bar.
Renders a group of star icons which represent a vote between 1 and 5.
Renders an animated loader spinner.
Common
A generic header element.
Renders a number with thousandths formatting.
Represents a sub heading element.
Uses absolute positioning to place elements relative to other elements.
Mounts its children in the document body.
Changes prop values on its children by responding to events triggered by the children.
An unordered list which can be filtered and reduced by query values.
An unordered list that can be scrolled through using arrow keys.
Wraps children with styled scrollbars.
Highlights a word or phrase.
Forms
Renders a form and handles its submission.
Groups a label and form children together.
Standard form input element.
Renders a form textarea.
Wraps optional form fields which may be shown or hidden.
Renders an inline search input.
Renders a search input with submit button, where search results are displayed in a popper below the input.
Renders a button which opens a search form.
Renders an input with drop down date picker.
Renders a custom select input.
Renders a toggle input.
Buttons
Standard button.
Button with click confirmation.
Renders a button with a left side and right side, where clicking the right side opens a popper.
Renders a button with a drop down icon and popper.
Renders a button which contains a progress bar.
Renders a progress button along with globe icon.
Columns
A navigation column containing expandable drawers.
An expandable drawer within a navigation column.
Standard drawer item which may contain an icon and number.
Tabs
Renders a group of links as tabs.
Cards
Renders a standard card.
Badges
Renders any text as a badge.
Circle shaped badge designed to display small numbers.
Displays the month and day in badge or pill format.
Utilities
Generates a unique id value.
Provides an empty function to use as a default callback.
Props
Returns a function used in propTypes to validate that children are of a specific component type.
Numbers
Formats a number to include commas (or any separator) in the thousandths place.
Returns a random whole number between a minimum and maximum number.
Strings
Upper cases the first letter in a string.
Converts HTML special characters into entities.
Wraps the given word in HTML tags where found in the given string.
Interpolate placeholder values found in the given string.
Regexp
Escapes the given string of any special regexp characters.
Objects
Performs a key comparison between two objects, deleting from the first where the keys exist in the second.
Iterates over an object.
Creates an array from the results of calling a function on each item in an object.
Dates
Returns the number of days in the given date.
Returns an array of all the days in the given date
Returns the name of the month for the given date.
DOM
Tests whether an object is a class which extends React.Component.
Tests whether an object is a stateless functional component.
Tests whether an object is any type of React component.
Tests whether an object is a valid DOM or React element.
CSS
Sets the width of one element to the computed width of another.
Bindings
License
The library is released under the BSD License. See
LICENSE for more information.
