chayns-components

A set of beautiful React components for developing chayns® applications.

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.