Skip to content

TobitSoftware/chayns-components

Repository files navigation

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.