{"id":25943483,"url":"https://github.com/tobitsoftware/chayns-components","last_synced_at":"2025-04-04T15:11:18.866Z","repository":{"id":18533486,"uuid":"84428157","full_name":"TobitSoftware/chayns-components","owner":"TobitSoftware","description":"A set of beautiful React components for developing chayns® applications.","archived":false,"fork":false,"pushed_at":"2025-03-27T15:38:44.000Z","size":148425,"stargazers_count":20,"open_issues_count":11,"forks_count":31,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-28T14:05:47.433Z","etag":null,"topics":["chayns","chayns-components","components","react","react-components","tobit"],"latest_commit_sha":null,"homepage":"https://npm.im/chayns-components","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TobitSoftware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-09T10:15:54.000Z","updated_at":"2025-02-12T12:20:02.000Z","dependencies_parsed_at":"2023-10-11T14:09:07.668Z","dependency_job_id":"e26ed354-535c-4578-b51b-dc124da8a962","html_url":"https://github.com/TobitSoftware/chayns-components","commit_stats":{"total_commits":3117,"total_committers":66,"mean_commits":47.22727272727273,"dds":0.644529996791787,"last_synced_commit":"7b706774a5c38891a5018451b797b837934f7cc7"},"previous_names":[],"tags_count":1482,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TobitSoftware%2Fchayns-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TobitSoftware%2Fchayns-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TobitSoftware%2Fchayns-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TobitSoftware%2Fchayns-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TobitSoftware","download_url":"https://codeload.github.com/TobitSoftware/chayns-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247198463,"owners_count":20900080,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chayns","chayns-components","components","react","react-components","tobit"],"created_at":"2025-03-04T07:16:56.837Z","updated_at":"2025-04-04T15:11:18.849Z","avatar_url":"https://github.com/TobitSoftware.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n \u003ch1\u003e\n \u003cimg src=\"https://raw.githubusercontent.com/TobitSoftware/chayns-components/master/assets/logo.png\" width=\"600px\" alt=\"chayns-components\" /\u003e\n \u003c/h1\u003e\n \u003cp\u003eA set of beautiful React components for developing chayns® applications.\u003c/p\u003e\n \u003cdiv\u003e\n \u003cimg src=\"https://img.shields.io/npm/dm/chayns-components.svg?style=for-the-badge\" alt=\"\" /\u003e\n \u003cimg src=\"https://img.shields.io/npm/v/chayns-components?style=for-the-badge\" alt=\"\" /\u003e\n \u003cimg src=\"https://img.shields.io/github/license/TobitSoftware/chayns-components?style=for-the-badge\" alt=\"\" /\u003e\n \u003cimg src=\"https://img.shields.io/github/contributors/TobitSoftware/chayns-components?style=for-the-badge\" alt=\"\" /\u003e\n \u003c/div\u003e\n\u003c/div\u003e\n\n---\n\n## Installation\n\nFirst you should install the `chayns-components` package into your project:\n\n```bash\n# Yarn\nyarn add chayns-components\n\n# NPM\nnpm install chayns-components\n```\n\nThe styles to our components are provided via the\n[`chayns-css`](https://github.com/TobitSoftware/chayns-css) library and some of\nthe components also rely on the\n[`chayns-js`](https://github.com/TobitSoftware/chayns-js) API, so you should\ninclude these in your HTML:\n\n```html\n\u003c!-- CSS styles --\u003e\n\u003cscript\n src=\"https://api.chayns-static.space/css/v4/compatibility/compatibility.min.js\"\n version=\"4.2\"\n\u003e\u003c/script\u003e\n\n\u003c!-- JS api --\u003e\n\u003cscript src=\"https://api.chayns-static.space/js/v4.0/chayns.min.js\"\u003e\u003c/script\u003e\n```\n\n## Components Overview\n\nThe following components are part of this package:\n\n| Component | Description |\n| ---------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [Accordion\u0026nbsp;›](docs/components/accordion.md) | Accordions are collapsible sections that are toggled by interacting with a permanently visible header. |\n| [AmountControl\u0026nbsp;›](docs/components/amount-control.md) | The AmountControl is a three-segment control used to increase or decrease an incremental value. |\n| [AnimationWrapper\u0026nbsp;›](docs/components/animation-wrapper.md) | The AnimationWrapper provides an eye-catching initial animation to its children. |\n| [Badge\u0026nbsp;›](docs/components/badge.md) | Badges are small, circular containers used to decorate other components with glancable information. |\n| [Bubble\u0026nbsp;›](docs/components/bubble.md) | A floating bubble that is primarily used to power the `ContextMenu` and `Tooltip` components. |\n| [Button\u0026nbsp;›](docs/components/button.md) | Buttons initiate actions, can include a title or an icon and come with a set of predefined styles. |\n| [Calendar\u0026nbsp;›](docs/components/calendar.md) | An interactive grid calendar that can highlight specified dates. |\n| [Checkbox\u0026nbsp;›](docs/components/checkbox.md) | 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. |\n| [ColorPicker\u0026nbsp;›](docs/components/color-picker.md) | Lets a user choose a color for text, shapes, marking tools, and other elements. |\n| [ColorScheme\u0026nbsp;›](docs/components/color-scheme.md) | Adjusts the color scheme for all child components. |\n| [ComboBox\u0026nbsp;›](docs/components/combo-box.md) | A button with a dropdown that contains a scrollable list of distinct values from which people can choose. |\n| [ContextMenu\u0026nbsp;›](docs/components/context-menu.md) | Gives people access to additional functionality related to onscreen items without cluttering the interface. |\n| [DateInfo\u0026nbsp;›](docs/components/date-info.md) | Formats a date or date range to be easily readable and reveals the absolute date on hover. |\n| [EmojiInput\u0026nbsp;›](docs/components/emoji-input.md) | A text input that allows emojis to be put in. |\n| [ExpandableContent\u0026nbsp;›](docs/components/expandable-content.md) | A collapsible section that reveals its children with a height transition. |\n| [FileInput\u0026nbsp;›](docs/components/file-input.md) | Accepts specified file types via dialog or drag and drop. |\n| [FilterButton\u0026nbsp;›](docs/components/filter-button.md) | A chip-like component that is used to filter lists. Usually used in a group of 2 or more. |\n| [FormattedInput\u0026nbsp;›](docs/components/formatted-input.md) | 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. |\n| [Gallery\u0026nbsp;›](docs/components/gallery.md) | 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`. |\n| [Icon\u0026nbsp;›](docs/components/icon.md) | Displays a FontAwesome icon. |\n| [ImageAccordion\u0026nbsp;›](docs/components/image-accordion.md) | An accordion that has a big image and appears in a grid. Should be used inside of an `ImageAccordionGroup`. |\n| [ImageAccordionGroup\u0026nbsp;›](docs/components/image-accordion-group.md) | Groups several `ImageAccordion` components together, so only one of them can be open at a time. |\n| [Input\u0026nbsp;›](docs/components/input.md) | A text input that can be validated and decorated with different designs. |\n| [List\u0026nbsp;›](docs/components/list.md) | The wrapper for the `ListItem`-component to create lists. |\n| [ListItem\u0026nbsp;›](docs/components/list-item.md) | The items in a list to display related data in a structured format. Should be used inside of a `List` component. |\n| [OpeningTimes\u0026nbsp;›](docs/components/opening-times.md) | An input for opening times. |\n| [PersonFinder\u0026nbsp;›](docs/components/person-finder.md) | An autocomplete search for persons that can be customized to work with arbitrary data. |\n| [PositionInput\u0026nbsp;›](docs/components/position-input.md) | 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](https://developers.google.com/maps/documentation/javascript/overview). |\n| [ProgressBar\u0026nbsp;›](docs/components/progress-bar.md) | An animated progress bar that can show an actions progress or an indeterminate state like a loading spinner. |\n| [RadioButton\u0026nbsp;›](docs/components/radio-button.md) | A radio button that allows to select one of multiple options. |\n| [RfidInput\u0026nbsp;›](docs/components/rfid-input.md) | A component to take in an RFID signal. |\n| [ScrollView\u0026nbsp;›](docs/components/scroll-view.md) | A scrollable container with a custom scrollbar that looks great on every device. |\n| [SearchBox\u0026nbsp;›](docs/components/search-box.md) | An autocomplete input to search through a list of entries. |\n| [SelectButton\u0026nbsp;›](docs/components/select-button.md) | A choose button that opens a selection dialog when clicked. |\n| [SelectItem\u0026nbsp;›](docs/components/select-item.md) | A radio button that expands its content when selected. Should be used inside of a `SelectList`. |\n| [SelectList\u0026nbsp;›](docs/components/select-list.md) | A vertical list of radio buttons that reveal content when selected. |\n| [SetupWizard\u0026nbsp;›](docs/components/setup-wizard.md) | A set of steps the user has to go through sequentially. |\n| [SetupWizardItem\u0026nbsp;›](docs/components/setup-wizard-item.md) | An item that represents one step in a `SetupWizard`. |\n| [SharingBar\u0026nbsp;›](docs/components/sharing-bar.md) | A context menu for sharing a link and some text on various platforms. |\n| [Signature\u0026nbsp;›](docs/components/signature.md) | A component to let the user subscribe |\n| [Slider\u0026nbsp;›](docs/components/slider.md) | A horizontal track with a thumb that can be moved between a minimum and a maximum value. |\n| [SliderButton\u0026nbsp;›](docs/components/slider-button.md) | A linear set of buttons which are mutually exclusive. |\n| [SmallWaitCursor\u0026nbsp;›](docs/components/small-wait-cursor.md) | A small circular loading indicator. |\n| [TagInput\u0026nbsp;›](docs/components/tag-input.md) | A text input that allows values to be grouped as tags. |\n| [TextArea\u0026nbsp;›](docs/components/text-area.md) | A multiline text input that can automatically grow with its content. |\n| [TextString\u0026nbsp;›](docs/components/text-string.md) | Loads text strings from our database and displays them. Handles replacements and changing the string via `CTRL` + `Click` (only internal). |\n| [Tooltip\u0026nbsp;›](docs/components/tooltip.md) | 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. |\n| [VerificationIcon\u0026nbsp;›](docs/components/verification-icon.md) |\n\n## Utility Functions\n\nWe also provide a set of common utility functions:\n\n| Function | Description |\n| ---------------------------------------------- | --------------------------------------------------------- |\n| [imageUpload](/src/utils/imageUpload.js) | Function to upload images to tsimg.cloud |\n| [isTobitEmployee](/src/utils/tobitEmployee.js) | Get the information if user is an tobit employee |\n| [createLinks](/src/utils/createLinks.js) | Creates a string with links from a string with URLs |\n| [removeHtml](/src/utils/removeHtml.js) | Removes HTML Tags from a string |\n| [ColorUtils](/src/utils/color/README.md) | Utility functions to convert color values (hex, rgb, hsv) |\n| [equalizer](/src/utils/equalizer.js) | Utility functions to equalize the width of html elements |\n\n## Contributing\n\nIf you want to contribute to `chayns-components`, check out the\n[CONTRIBUTING.md](/CONTRIBUTING.md) file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftobitsoftware%2Fchayns-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftobitsoftware%2Fchayns-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftobitsoftware%2Fchayns-components/lists"}