Wondering what’s next for npm?Check out our public roadmap! »

    @component-controls/components
    TypeScript icon, indicating that this package has built-in type declarations

    3.6.1 • Public • Published

    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.

    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

    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 data records
    totalCountVisible boolean whether to make totlal countfield visible
    totalCountTemplate string total count label text
    pageTemplate string 'Page ${pageIndex} of ${pageLength}' template
    pageVisible boolean ability to hide the page xx of yy block
    pageSizeTemplate string string template for the page size selection '${pageSize} rows',
    pageSizeVisible boolean ability to hide the page size selector
    goToPageTemplate string string for the go to page label 'Go to page:'
    goToPageVisible boolean ability to hide the go to page block
    pageIndex number initial page index when pagination is enabled
    pageSize number initial page size when pagination is enabled

    Tab

    Tab heading - you should specify the title/label string as the children property. To be created inside the <TabList /> component through the children prop.

    Tab source code

    TabList

    Container for <Tab /> headings, to be created inside the <Tabs /> component. The list of <Tab /> components should be passed as the children prop.

    TabList source code

    TabPanel

    Panel body container, to be created inside the <Tabs /> component through the children prop.

    TabPanel source code

    Tabs

    Tabs component with react-tabs and theme-ui styling.

    Tabs source code

    properties

    Name Type Description
    fontSize ReactText

    Tag

    A container component to display text in a colored box, with a semi-transparent background.

    Tag source code

    properties

    Name Type Description
    color string color for the tag. The full color will be applied to the border and a transparentized color will be used as background 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)
    transparentAmount number transparent amount - 0 to 1
    borderSize number borderSize in pixels
    variant string theme variant additional
    raw string raw string value to be injected. Useful for highlighting searh results
    ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>
    as ElementType<any>
    css Interpolation<any>
    sx ThemeUIStyleObject

    ThemeProvider

    ThemeProvider source code

    properties

    Name Type Description
    components MarkdownComponentType components to customize the markdown display.
    theme Theme

    TitledImage

    Image component with a title if available

    TitledImage source code

    properties

    Name Type Description
    as ElementType<any>
    variant string
    css Interpolation<any>
    sx ThemeUIStyleObject

    Toggle

    Toggle components can be used to edit boolean values. Uses react-switch component.

    Toggle source code

    properties

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

    Tree

    Hierarchical collapsible tree structure

    Tree source code

    properties

    Name Type Description
    items* TreeItems Array of child items
    arrowPosition "start" | "end" POsition of the expand/collapse arrow
    activeItem Pick<TreeItem, "label" | "id"> Initially active item
    expandAll boolean If specified, will expand all items with chidren
    onSelect ((item?: TreeItem) => void) & ((event: SyntheticEvent<HTMLDivElement, Event>) => void) Function that will be called when the user selects a item
    onExpandCollapse (expandedCount: number) => void Function that will be called on expand/collapse
    search string If specified, will filter the items by the search terms
    chevronIcon ReactNode custom chevron icon
    indentPixels number indentation in pixels for each elevel, By default 6 pixels
    ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>
    as ElementType<any>
    variant string
    css Interpolation<any>
    sx ThemeUIStyleObject

    Value

    Displays a value with a small label

    Value source code

    properties

    Name Type Description
    label* ReactNode label - usually smaller and muted
    value* ReactNode highlighted value
    ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>
    as ElementType<any>
    variant string
    css Interpolation<any>
    sx ThemeUIStyleObject

    Zoom

    zoom effect using transform

    Zoom source code

    properties

    Name Type Description
    scale number default scale

    Keywords

    none

    Install

    npm i @component-controls/[email protected]

    Version

    3.6.1

    License

    MIT

    Unpacked Size

    2.87 MB

    Total Files

    389

    Last publish

    Collaborators

    • avatar