@component-controls/components is an ecclectic collection of theme-ui-based components that are used throughout component-controls.
Third-party libraries used:
- prism for source code syntax highlighting, rendered with prism-react-renderer.
- markdown-to-jsx to transform markdown to JSX at runtime.
- react-table to display tabular data.
- octicons for icons used in the components.
- react-tabs for tabs and multi-page components.
- react-popper-tooltip for popups and tooltips.
- react-animate-height for collapsible components.
- @theme-ui/presets for custom theming.
- react-switch for toggle/boolean inputs.
$ npm install @component-controls/components --save
You can view a table with the cross-usage of the included components
Containers
Container box with actions.
Collapsible block container with a title. The title creates also an attribute id and an octicon for github style navigation.
Animated expand/collapse container component, using react-animate-height.
Container component that will fade/outline a label at the bottom
Action container with built-in collapsible panels
Popover container that is triggered by a click/hover event, using react-popper-tooltip.
Display
avatar to be used in an AvatarList container
Avatar list that links to github profiles using rest api
A page header component
Progress indicator with a label
Syntax highliting source code component. Uses prism for the actual source display.
export const sample = () => {const [state, setState] = React.useState(false);return (<BooleanEditorname="prop"onChange={(name, newVal) => setState(newVal)}prop={{ type: ControlTypes.BOOLEAN, value: state }}/>);};
Syntax highlighter component using prism for the actual source display.
import { Button } from 'theme-ui';Table component using react-table to display the data. Can be grouped, filtered, sorted. Themed with theme-ui for consistency.
Name | User Name | Street | City | Zip Code |
|---|---|---|---|---|
| Edison Keebler | Danielle_Pollich | Jayde Rapids | Montanaborough | 20635 |
| London Runolfsson | Audreanne.Sanford | Towne Cliff | Langoshport | 65133 |
| Sebastian Gleason | Johnathan.Klocko58 | Haley Drives | South Kiannaberg | 58169 |
| Gladys Baumbach | Darien.Gutmann | Anastasia Points | West Graycemouth | 33850 |
| Ms. Jaunita Lubowitz | Kody.McClure | Lindgren Inlet | Grimesshire | 27558-3367 |
| Jacques Bernhard | Nichole_Kozey4 | Ramona Station | Gunnerland | 64856 |
| Dr. Rylee DuBuque | Lewis.Vandervort7 | Kelly Landing | Lake Gabe | 98806 |
| Nettie Runte | Johnny.Marquardt30 | Larson Square | Hannaton | 81636 |
| Isabell Feil Jr. | Rafaela.Gusikowski4 | Kaya Mountain | Kemmerbury | 01459 |
| Jillian Hoeger | Annamae.Maggio23 | Darlene Course | Earlenebury | 70931 |
| Melyssa Herman | Verona_Wiza | Zulauf Circle | Corkeryland | 52057-0050 |
| Urban Towne | Kayleigh_Hauck | Bechtelar Extensions | Ruthshire | 49065 |
| Hazle Hansen | Hassie_Tillman73 | Reichel Street | West Audreymouth | 53056-1765 |
| Jamarcus Stroman | Orval13 | Hobart Park | West Rahul | 60010 |
| Ms. Melany Senger | Henderson.Kihn | Lia Village | DuBuqueview | 93383 |
| Granville Mann | Christine.Bahringer10 | Hilpert Landing | North Autumnside | 87215-3190 |
| Delia Feeney | Greyson13 | Purdy Fords | Zoilaside | 96503 |
| Mr. Johanna Turcotte | Dameon76 | Mante Junctions | North Roxane | 17884-9473 |
| Renee Erdman | Ben.Hammes | Treutel Inlet | Port Maiabury | 21650 |
| Graham Brown | Eloise.Schumm35 | Alia Port | Port Brandt | 80217-7245 |
A container component to display text in a colored box, with a semi-transparent background.
Image component with a title if available
some image titleDisplays a value with a small label
zoom effect using transform
Input
Popover multiselect displaying checkboxes to select/unselect.
an input component combined with a popover, can be used for incremental search.
Toggle components can be used to edit boolean values. Uses react-switch component.
Navigation
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.
Anchor link to an external url, adds the default
target="_blank" rel="noopener noreferrer" props.Configurable anchor link with a LinkContext. Also checks if the link is intrenal to the site/app or external.
h1-h6 heading component that generates automatically a github-style anchor to navigate to a section on hover.
Pagination component to navigate previous/next page
Collapsible side bar component
Tabs component with react-tabs and theme-ui styling.
- panel 1
- panel 2
Hierarchical collapsible tree structure
Typography
Markdown content with custom components - for example
<p /> is with smaller margin than regular markdown content.Some description markdown
Markdown display component to compile and display markdown at run-time. Uses markdown-to-jsx internally.
h2 level heading with faded text and font-weight 400.Subtitle text
Utilities
Theme-ui dark/light mode toggle.
Container component to enclose items that will provide copy functionality on click.
some text.
click to copy