@component-controls/components

Component controls commonly used UI components.

Usage no npm install needed!

<script type="module">
  import componentControlsComponents from 'https://cdn.skypack.dev/@component-controls/components';
</script>

README

Table of contents

Installation

This package is usually installed as part of the @component-controls package, but you can also install it standalone and use the components in your:

$ npm install @component-controls/components --save

Documentation

live documentation site

Overview

An ecclectic collection of theme-ui-based components that are used throughout component-controls.

Third-party libraries used in no particular order:

List of components

ActionBar

A strip of actions to be attached to a container. The action items contain the labels and click event handlers. Actions can accept an order prop, and can also overwrite default actions.

ActionBar source code

properties

Name Type Description
actions ActionItems collection of action items
themeKey string custom layouts from the theme, defaults to 'actionbar'

ActionContainer

Container box with actions.

ActionContainer source code

properties

Name Type Description
actions ActionItem[] optional actions provided to the component
plain boolean if plain, skip the border and spacing around the children

BlockContainer

Collapsible block container with a title. The title creates also an attribute id and an octicon for github style navigation.

BlockContainer source code

properties

Name Type Description
title string optional section title for the block.
description string optional markdown description.
id string optional id to be used for the block if no id is provided, one will be calculated automatically from the title.
collapsible boolean if false, will nothave a collapsible frame.
data-testid string testing id
plain boolean inner container variant or plain
ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>
as ElementType<any>
variant string
css Interpolation<any>
sx ThemeUIStyleObject

Collapsible

Animated expand/collapse container component, using react-animate-height.

Collapsible source code

properties

Name Type Description
isOpen* boolean controlled open state
animateOpacity boolean
animationStateClasses AnimationStateClasses
applyInlineTransitions boolean
contentClassName string
delay number
duration number
easing string
height ReactText
onAnimationEnd (props: { newHeight: number; }) => void
onAnimationStart (props: { newHeight: number; }) => void

ColorMode

Theme-ui dark/light mode toggle.

ColorMode source code

properties

Name Type Description
label string optional label to be displayed alongside the toggle
ref Ref<ReactSwitch> obtain a ref target

CopyContainer

Container component to enclose items that will provide copy functionality on click.

CopyContainer source code

properties

Name Type Description
name string name of the property
value* string value to copy

Description

Markdown content with custom components - for example <p /> is with smaller margin than regular markdown content.

Description source code

properties

Name Type Description
children string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)>) | (string & ReactNodeArray) | (string & ReactPortal) the markdown source code is passed as a children pro.
components { [key: string]: ComponentOverride<any, any>; a?: ComponentOverride<any, any>; br?: ComponentOverride<any, any>; button?: ComponentOverride<any, any>; ... 27 more ...; ul?: ComponentOverride<...>; } components to customize the markdown display.

Donut

Donut source code

properties

Name Type Description
size number svg area size
strokeWidth number circle stroke size
value number initial value = between min and max
min number minimum value
max number maximum value
title string a title for the graphic
ref Ref<HTMLDivElement>

ExternalLink

Anchor link to an external url, adds the default target="_blank" rel="noopener noreferrer" props.

ExternalLink source code

properties

Name Type Description
ref ((instance: HTMLAnchorElement) => void) | RefObject<HTMLAnchorElement>
as ElementType<any>
variant string
css Interpolation<any>
sx ThemeUIStyleObject

GithubAvatar

avatar to be used in an AvatarList container

GithubAvatar source code

properties

Name Type Description
username* string user name
useremail string optional user email to link to gravatar
tooltip ReactNode on hover profile box
overlap number overlap % of the avatars in a list
size number size in pixels
fixedSize boolean whether to fix the size of the avataro on hover
githubAccessToken string to increase access rate for github user profile info

useGithubProfile

useGithubProfile source code

properties

Name Type Description
username* string
useremail string
githubAccessToken string
size number

GithubAvatarList

Avatar list that links to github profiles using rest api

GithubAvatarList source code

properties

Name Type Description
users* GithubAvatarUser[] list of github user names
maxItems number max number of avatars, then use a '...'
tooltip ReactNode on hover profile box
overlap number overlap % of the avatars in a list
size number size in pixels
fixedSize boolean whether to fix the size of the avataro on hover
githubAccessToken string to increase access rate for github user profile info
ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>
as ElementType<any>
variant string
css Interpolation<any>
sx ThemeUIStyleObject

Header

A page header component

Header source code

properties

Name Type Description
ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>
as ElementType<any>
variant string
css Interpolation<any>
sx ThemeUIStyleObject

HoverBox

Container component that will fade/outline a label at the bottom

HoverBox source code

properties

Name Type Description
label* string laabel to be displayed when the box is hovered
ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>
as ElementType<any>
variant string
css Interpolation<any>
sx ThemeUIStyleObject

InfoTip

Displays an information icon with markdown-enabled popup on hover

InfoTip source code

properties

Name Type Description
size number size of the icon in pixels
icon ReactNode custom icon
arrowVisible boolean set to false to hide the arrow

Keyboard

Componet to monitor keystrokes. Can attach to child, document or window.

Keyboard source code

properties

Name Type Description
keys* number[] array of the keys to be trapped
target "children" | "document" | "window" to where to attach the event handler
onKeyDown* KeyboardCallback callbal on key down
children ReactElement<any, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> | (ReactElement<any, string | ((props: any) => ReactElement<...>) | (new (props: any) => Component<...>)> & string) | ... 5 more ... | (ReactElement<...> & ReactPortal) child element to the key event handler will be attached to if target = 'children'

Link

Configurable anchor link with a LinkContext. Also checks if the link is intrenal to the site/app or external.

Link source code

properties

Name Type Description
ref ((instance: HTMLAnchorElement) => void) | RefObject<HTMLAnchorElement>
as ElementType<any>
variant string
css Interpolation<any>
sx ThemeUIStyleObject

LinkContextProvider

LinkContextProvider source code

properties

Name Type Description
linkClass* FC<LinkProps>

useIsLocalLink

useIsLocalLink source code

LinkHeading

h1-h6 heading component that generates automatically a github-style anchor to navigate to a section on hover.

LinkHeading source code

properties

Name Type Description
ref ((instance: HTMLHeadingElement) => void) | RefObject<HTMLHeadingElement>
as ElementType<any>
variant string
css Interpolation<any>
sx ThemeUIStyleObject

Markdown

Markdown display component to compile and display markdown at run-time. Uses markdown-to-jsx internally.

Markdown source code

properties

Name Type Description
children string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)>) | (string & ReactNodeArray) | (string & ReactPortal) the markdown source code is passed as a children pro.
components { [key: string]: ComponentOverride<any, any>; a?: ComponentOverride<any, any>; br?: ComponentOverride<any, any>; button?: ComponentOverride<any, any>; ... 27 more ...; ul?: ComponentOverride<...>; } components to customize the markdown display.

Multiselect

Popover multiselect displaying checkboxes to select/unselect.

Multiselect source code

properties

Name Type Description
items* MultiselectItem[] array of items to select from
onChange* (item: MultiselectItem) => void function called when the selected state of an item changes
arrowVisible boolean set to false to hide the arrow

Pagination

Pagination component to navigate previous/next page

Pagination source code

properties

Name Type Description
prev PaginationPage link and title to previous page
next PaginationPage link and title to next page

IconButton

IconButton source code

properties

Name Type Description
ref ((instance: HTMLButtonElement) => void) | RefObject<HTMLButtonElement>
as ElementType<any>
variant string
css Interpolation<any>
sx ThemeUIStyleObject

PanelContainer

Action container with built-in collapsible panels

PanelContainer source code

properties

Name Type Description
openTab ReactNode by default, which tab to have open.
visibleTabs boolean if true, the tabs on the panels will be visible
background BackgroundType background pattern type
direction DirectionType direction type
actions ActionItem[] optional actions provided to the component
plain boolean if plain, skip the border and spacing around the children

Popover

Popover container that is triggered by a click/hover event, using react-popper-tooltip.

Popover source code

properties

Name Type Description
arrowVisible boolean set to false to hide the arrow

ProgressIndicator

Progress indicator with a label

ProgressIndicator source code

properties

Name Type Description
value* number
max* number
color string

SearchInput

an input component combined with a popover, can be used for incremental search.

SearchInput source code

properties

Name Type Description
onSearch* (search: string) => void | Promise<void> callback on change of search input. user can retrieve items in this callback
onSelect (item: ItemType) => void on select a search item.
children ((props: SearchBoxCallbackProps<ItemType>) => ReactNode) | (((props: SearchBoxCallbackProps<ItemType>) => ReactNode) & string) | ... 5 more ... | (((props: SearchBoxCallbackProps<...>) => ReactNode) & ReactPortal) children is a render prop to allow custom rendering of items, one at a time
items ItemType[] items array
popoverProps PopoverProps customize the popover
render (rendered: ReactNode) => ReactNode custom renver of the search items popup
as ElementType<any>
variant string
css Interpolation<any>
sx ThemeUIStyleObject

Shield

A container component to display label/value pairs, where the value is colord. Similar design to github shields.

Shield source code

properties

Name Type Description
label* string shield label/text
value ReactText value displayed with background color
percent boolean if true, treat the value as a percentage number from 0 to 100
color string background color for the value. The color utility parses a component's `color` and `bg` props and converts them into CSS declarations. By default the raw value of the prop is returned. Color palettes can be configured with the ThemeProvider to use keys as prop values, with support for dot notation. Array values are converted into responsive values. [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/color)
ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>
as ElementType<any>
css Interpolation<any>
sx ThemeUIStyleObject

Sidebar

Collapsible side bar component

Sidebar source code

properties

Name Type Description
title string | ({} & string) | (ReactElement<any, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & string) | (ReactNodeArray & string) | (ReactPortal & string) Title string or any react node
collapsible boolean Whether the sidebar can be collapsed
children ReactNode children content elements to be displayed in Sidebar
ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>
as ElementType<any>
variant string
css Interpolation<any>
sx ThemeUIStyleObject

SidebarContextProvider

SidebarContextProvider source code

properties

Name Type Description
collapsible boolean

SkiLinksItem

single skip link anchor item

SkiLinksItem source code

properties

Name Type Description
target string target's id property, without the # char
text* string text message to be displayed
ref ((instance: HTMLAnchorElement) => void) | RefObject<HTMLAnchorElement>
as ElementType<any>
variant string
css Interpolation<any>
sx ThemeUIStyleObject

SkipLinks

list of anchor elements to skip to

SkipLinks source code

properties

Name Type Description
items* SkipLinksItemProps[]

Source

Syntax highliting source code component. Uses prism for the actual source display.

Source source code

properties

Name Type Description
actions ActionItem[] optional actions provided to the component
plain boolean if plain, skip the border and spacing around the children
children string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)>) | (string & ReactNodeArray) | (string & ReactPortal) source code to be displayed.
theme PrismTheme optional `PrismTheme` theme provided to the component. Themes can be imported from `prism-react-renderer/themes`.
title string optional title to display for the code block. Usually used from MDX
language Language source lnguage used, by default "jsx".
renderFn (props: RenderProps, other: { theme: PrismTheme; }) => ReactNode custom function to render the source code.
dark boolean used to specify a "dark" color theme - applcable only if no custom theme prop is provided. if dark: true, duotoneDark theme is used. if dark: false, duotoneLight theme is used.
style CSSProperties css styles for the container.
as ElementType<any> syntax container as element. Can be used as `div` or `span`.
metastring string code configuration string passed from MDX

Subtitle

h2 level heading with faded text and font-weight 400.

Subtitle source code

properties

Name Type Description
children string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)>) | (string & ReactNodeArray) | (string & ReactPortal) text to be displayed in the component.
as "h2" | "h1" | "h3" | "h4" | "h5" DOM node type to render as. By default h3.
ref ((instance: HTMLHeadingElement) => void) | RefObject<HTMLHeadingElement>
variant string
css Interpolation<any>
sx ThemeUIStyleObject

SyntaxHighlighter

Syntax highlighter component using prism for the actual source display.

SyntaxHighlighter source code

properties

Name Type Description
children string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)>) | (string & ReactNodeArray) | (string & ReactPortal) source code to be displayed.
theme PrismTheme optional `PrismTheme` theme provided to the component. Themes can be imported from `prism-react-renderer/themes`.
title string optional title to display for the code block. Usually used from MDX
language Language source lnguage used, by default "jsx".
renderFn (props: RenderProps, other: { theme: PrismTheme; }) => ReactNode custom function to render the source code.
dark boolean used to specify a "dark" color theme - applcable only if no custom theme prop is provided. if dark: true, duotoneDark theme is used. if dark: false, duotoneLight theme is used.
style CSSProperties css styles for the container.
as ElementType<any> syntax container as element. Can be used as `div` or `span`.
metastring string code configuration string passed from MDX

Table

Table component using react-table to display the data. Can be grouped, filtered, sorted. Themed with theme-ui for consistency.

Table source code

properties

Name Type Description
columns* Column<D>[] the columns object as an array.
data D[] array of data rows.
header boolean show or hide the header element.
sorting boolean enable.disable sorting.
filtering boolean enable/disable filtering.
itemsLabel string string label for 'items' - used in the filter placeholder and grouping header.
groupBy string[] field to be grouped by.
hiddenColumns string[] list of columns to hide.
rowSelect boolean if true, will enable row selection
initialSelected Record<number, boolean> initially selected rows
onSelectRowsChange (selected: Record<number, boolean>) => void callback when selected rows change
expanded { [key: string]: boolean; } object listing the initially expanded rows.
skipPageReset boolean reset state update while update table data
renderRowSubComponent (props: { row: Row<{}>; }) => ReactNode callback to render a SubComponent row
sortBy SortingRule<any>[] initial sorting
pagination boolean | TablePaginationProps enable pagination
ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>
as ElementType<any>
variant string
css Interpolation<any>
sx ThemeUIStyleObject

TablePagination

TablePagination source code

properties

Name Type Description
data any[] array of