Installation

First you should install the chayns-components package into your project:

# Yarn
yarn add chayns-components

# NPM
npm install chayns-components

The styles to our components are provided via the chayns-css library and some of the components also rely on the chayns-js API, so you should include these in your HTML:

<!-- CSS styles -->
<script
  src="https://api.chayns-static.space/css/v4/compatibility/compatibility.min.js"
  version="4.2"
></script>

<!-- JS api -->
<script src="https://api.chayns-static.space/js/v4.0/chayns.min.js"></script>

Components Overview

The following components are part of this package:

| Component | Description | | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Accordion › | Accordions are collapsible sections that are toggled by interacting with a permanently visible header. | | AmountControl › | The AmountControl is a three-segment control used to increase or decrease an incremental value. | | AnimationWrapper › | The AnimationWrapper provides an eye-catching initial animation to its children. | | Badge › | Badges are small, circular containers used to decorate other components with glancable information. | | Bubble › | A floating bubble that is primarily used to power the ContextMenu and Tooltip components. | | Button › | Buttons initiate actions, can include a title or an icon and come with a set of predefined styles. | | Calendar › | An interactive grid calendar that can highlight specified dates. | | Checkbox › | Checkboxes allow users to complete tasks that involve making choices such as selecting options. Can be styled as a switch, a visual toggle between two mutually exclusive states — on and off. | | ColorPicker › | Lets a user choose a color for text, shapes, marking tools, and other elements. | | ColorScheme › | Adjusts the color scheme for all child components. | | ComboBox › | A button with a dropdown that contains a scrollable list of distinct values from which people can choose. | | ContextMenu › | Gives people access to additional functionality related to onscreen items without cluttering the interface. | | DateInfo › | Formats a date or date range to be easily readable and reveals the absolute date on hover. | | EmojiInput › | A text input that allows emojis to be put in. | | ExpandableContent › | A collapsible section that reveals its children with a height transition. | | FileInput › | Accepts specified file types via dialog or drag and drop. | | FilterButton › | A chip-like component that is used to filter lists. Usually used in a group of 2 or more. | | FormattedInput › | A text input that automatically formats its input with a formatter. Since this component is based on the Input-component, it takes any of the Input-components props, which are not listed here. This component only works as an uncontrolled component, meaning that it does not take a value-prop. | | Gallery › | An image gallery that displays up to four images by default. Also supports reordering and deletion of images and blurred image previews for images loaded from tsimg.cloud. | | Icon › | Displays a FontAwesome icon. | | ImageAccordion › | An accordion that has a big image and appears in a grid. Should be used inside of an ImageAccordionGroup. | | ImageAccordionGroup › | Groups several ImageAccordion components together, so only one of them can be open at a time. | | Input › | A text input that can be validated and decorated with different designs. | | List › | The wrapper for the ListItem-component to create lists. | | ListItem › | The items in a list to display related data in a structured format. Should be used inside of a List component. | | OpeningTimes › | An input for opening times. | | PersonFinder › | An autocomplete search for persons that can be customized to work with arbitrary data. | | PositionInput › | A location input with a map and text input. This requires the Google Maps JavaScript API with the places library enabled. You can find more information about the Maps API here. | | ProgressBar › | An animated progress bar that can show an actions progress or an indeterminate state like a loading spinner. | | RadioButton › | A radio button that allows to select one of multiple options. | | RfidInput › | A component to take in an RFID signal. | | ScrollView › | A scrollable container with a custom scrollbar that looks great on every device. | | SearchBox › | An autocomplete input to search through a list of entries. | | SelectButton › | A choose button that opens a selection dialog when clicked. | | SelectItem › | A radio button that expands its content when selected. Should be used inside of a SelectList. | | SelectList › | A vertical list of radio buttons that reveal content when selected. | | SetupWizard › | A set of steps the user has to go through sequentially. | | SetupWizardItem › | An item that represents one step in a SetupWizard. | | SharingBar › | A context menu for sharing a link and some text on various platforms. | | Signature › | A component to let the user subscribe | | Slider › | A horizontal track with a thumb that can be moved between a minimum and a maximum value. | | SliderButton › | A linear set of buttons which are mutually exclusive. | | SmallWaitCursor › | A small circular loading indicator. | | TagInput › | A text input that allows values to be grouped as tags. | | TextArea › | A multiline text input that can automatically grow with its content. | | TextString › | Loads text strings from our database and displays them. Handles replacements and changing the string via CTRL + Click (only internal). | | Tooltip › | Wraps a child component and displays a message when the child is hovered or clicked on. Allows to be shown imperatively by calling .show() or .hide() on its reference. | | VerificationIcon › |

Utility Functions

We also provide a set of common utility functions:

| Function | Description | | ---------------------------------------------- | --------------------------------------------------------- | | imageUpload | Function to upload images to tsimg.cloud | | isTobitEmployee | Get the information if user is an tobit employee | | createLinks | Creates a string with links from a string with URLs | | removeHtml | Removes HTML Tags from a string | | ColorUtils | Utility functions to convert color values (hex, rgb, hsv) | | equalizer | Utility functions to equalize the width of html elements |

Contributing

If you want to contribute to chayns-components, check out the CONTRIBUTING.md file.