Deskpro React Components

Downloads in past


4141.4.108 months ago5 years agoMinified + gzip package size for @deskpro/react-components in KB


A react-based set of components for building DeskPRO apps.
Build Status Coverage Status License npm version Storybook
Common Forms Buttons Columns Tabs Cards Badges Props Numbers Strings Regexp Objects Dates DOM CSS


A Storybook demo is available online at https://deskpro.github.io/react-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.


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.


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.


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.


A navigation column containing expandable drawers. An expandable drawer within a navigation column. Standard drawer item which may contain an icon and number.


Renders a group of links as tabs.


Renders a standard card.


Renders any text as a badge. Circle shaped badge designed to display small numbers. Displays the month and day in badge or pill format.


Generates a unique id value. Provides an empty function to use as a default callback.


Returns a function used in propTypes to validate that children are of a specific component type.


Formats a number to include commas (or any separator) in the thousandths place. Returns a random whole number between a minimum and maximum number.


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.


Escapes the given string of any special regexp characters.


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.


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.


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.


Sets the width of one element to the computed width of another.



The library is released under the BSD License. See LICENSE for more information.