TypeScript declarations for Crestron CH5 Web Components with React JSX support
npm install @imperosoft/ch5-typescriptbash
npm install @imperosoft/ch5-typescript
`
Usage
After installation, CH5 elements are automatically available in JSX:
`tsx
import React from 'react';
function App() {
return (
{/ Simple click button /}
{/ Toggle button with feedback /}
receivestateselected="101"
mode="toggle"
label="Mute"
/>
{/ Slider with analog join /}
receivestatevalue="1"
orientation="vertical"
/>
{/ Text display from serial join /}
);
}
`
Join Communication
$3
| Attribute | Description |
|-----------|-------------|
| sendeventonclick | Sends a pulse (true→false) on click/tap |
| sendeventontouch | Sends true every 200ms while touched, false on release |
| sendeventonchange | Sends value changes (analog/serial joins) |
$3
| Attribute | Description |
|-----------|-------------|
| receivestateselected | Digital join: true = selected/pressed state |
| receivestatevalue | Analog join: numeric value (0-65535) |
| receivestatelabel | Serial join: text content |
| receivestateshow | Digital join: true = visible, false = hidden |
| receivestateenable | Digital join: true = enabled, false = disabled |
Event Behavior
$3
Sends a momentary pulse when clicked:
1. User presses → sends true
2. Immediately sends false (pulse)
$3
For hold-to-repeat functionality:
1. User presses → sends true
2. While held → sends true every 200ms
3. User releases → sends false
Included Components
- ch5-animation - Animation object
- ch5-background - Background with video support
- ch5-button - Interactive button
- ch5-button-list - Button collection
- ch5-color-chip - RGB color display
- ch5-color-picker - Color selection
- ch5-datetime - Date/time display
- ch5-dpad - Directional pad
- ch5-form - Form container
- ch5-image - Image display
- ch5-import-htmlsnippet - HTML snippet loader
- ch5-jointotext-boolean - Digital to text
- ch5-jointotext-numeric - Analog to text
- ch5-jointotext-string - Serial to text
- ch5-keypad - Numeric keypad
- ch5-list - Dynamic list
- ch5-media-player - Audio player (Beta)
- ch5-modal-dialog - Modal dialog
- ch5-overlay-panel - Overlay container
- ch5-qrcode - QR code generator
- ch5-segmented-gauge - LED gauge
- ch5-select - Selection list
- ch5-select-option - Select option
- ch5-signal-level-gauge - Signal level display
- ch5-slider - Analog slider
- ch5-spinner - Loading spinner
- ch5-subpage-reference-list - Subpage list
- ch5-tab-button - Tabbed buttons
- ch5-template - Template instantiation
- ch5-text - Text display
- ch5-textinput - Text input
- ch5-toggle - Toggle switch
- ch5-triggerview - View switcher
- ch5-video - Video player
- ch5-video-switcher - Video switching
- ch5-wifi-signal-level-gauge - WiFi signal display
Exported Types
`typescript
import type {
JoinType,
CrComLibInterface,
WebXPanelInterface,
Ch5Size,
Ch5Stretch,
Ch5Type,
Ch5Orientation,
Ch5ButtonShape,
Ch5ButtonMode,
Ch5IconPosition,
Ch5HandleShape,
Ch5CommonAttributes,
// ... and more
} from '@imperosoft/ch5-typescript';
``