React Crestron CH5 Hooks ⚓
A collection of React custom hooks
Contents 📖
- Features
📦 - Installation
⚡ -
Usage
🚀 -
Types
⌨️ - Team
⚽ - Contributors
✨ - LICENSE
⚖️
Features 📦
Installation ⚡
npm install @norgate-av/react-crestron-ch5-hooks
# or
yarn add @norgate-av/react-crestron-ch5-hooks
Usage 🚀
Publish ➡️
useCrestronPublishAnalog
import { useCrestronPublishAnalog } from "@norgate-av/react-crestron-ch5-hooks";
export const SomeAwesomeComponent = () => {
const [action] = useCrestronPublishAnalog("some-analog-join-or-name");
return (
<div>
<h1>Analog Event Actions</h1>
<button onClick={() => action.setValue(666)}>Set Value</button>
</div>
);
};
export default SomeAwesomeComponent;useCrestronPublishDigital
import { useCrestronPublishDigital } from "@norgate-av/react-crestron-ch5-hooks";
export const SomeAwesomeComponent = () => {
const [action] = useCrestronPublishDigital("some-digital-join-or-name");
return (
<div>
<h1>Digital Event Actions</h1>
<button
onTouchStart={() => action.setValue(true)}
onTouchEnd={() => action.setValue(false)}
>
Set Value
</button>
<button
onTouchStart={() => action.push()}
onTouchEnd={() => action.release()}
>
Push/Release
</button>
<button onClick={() => action.click()}>Click</button>
</div>
);
};
export default SomeAwesomeComponent;useCrestronPublishSerial
import { useCrestronPublishSerial } from "@norgate-av/react-crestron-ch5-hooks";
export const SomeAwesomeComponent = () => {
const [action] = useCrestronPublishSerial("some-serial-join-or-name");
return (
<div>
<h1>Serial Event Actions</h1>
<button onClick={() => action.setValue("cowbell")}>
Set Value
</button>
</div>
);
};
export default SomeAwesomeComponent;useCrestronPublishAnalogCollection
import { useCrestronPublishAnalogCollection } from "@norgate-av/react-crestron-ch5-hooks";
export const SomeAwesomeComponent = () => {
const [action1, action2, action3] = useCrestronPublishAnalogCollection([
"some-analog-join-or-name",
"2",
"3",
]);
return (
<div>
<h1>Analog Event Actions Collection</h1>
<button onClick={() => action1.setValue(666)}>Set Value 1</button>
<button onClick={() => action2.setValue(666)}>Set Value 2</button>
<button onClick={() => action3.setValue(666)}>Set Value 3</button>
</div>
);
};
export default SomeAwesomeComponent;useCrestronPublishDigitalCollection
import { useCrestronPublishDigitalCollection } from "@norgate-av/react-crestron-ch5-hooks";
export const SomeAwesomeComponent = () => {
const [action1, action2, action3] = useCrestronPublishDigitalCollection([
"some-digital-join-or-name",
"2",
"3",
]);
return (
<div>
<h1>Digital Event Actions Collection</h1>
<button
onTouchStart={() => action1.setValue(true)}
onTouchEnd={() => action1.setValue(false)}
>
Set Value 1
</button>
<button
onTouchStart={() => action1.push()}
onTouchEnd={() => action1.release()}
>
Push/Release 1
</button>
<button onClick={() => action1.click()}>Click 1</button>
<button
onTouchStart={() => action2.setValue(true)}
onTouchEnd={() => action2.setValue(false)}
>
Set Value 2
</button>
<button
onTouchStart={() => action2.push()}
onTouchEnd={() => action2.release()}
>
Push/Release 2
</button>
<button onClick={() => action2.click()}>Click 2</button>
<button
onTouchStart={() => action3.setValue(true)}
onTouchEnd={() => action3.setValue(false)}
>
Set Value 3
</button>
<button
onTouchStart={() => action3.push()}
onTouchEnd={() => action3.release()}
>
Push/Release 3
</button>
<button onClick={() => action3.click()}>Click 3</button>
</div>
);
};
export default SomeAwesomeComponent;useCrestronPublishSerialCollection
import { useCrestronPublishSerialCollection } from "@norgate-av/react-crestron-ch5-hooks";
export const SomeAwesomeComponent = () => {
const [action1, action2, action3] = useCrestronPublishSerialCollection([
"some-serial-join-or-name",
"2",
"3",
]);
return (
<div>
<h1>Serial Event Actions Collection</h1>
<button onClick={() => action1.setValue("cowbell")}>
Set Value 1
</button>
<button onClick={() => action2.setValue("cowbell")}>
Set Value 2
</button>
<button
onClick={() =>
action3.setValue("That's enough cowbell for now!")
}
>
Set Value 3
</button>
</div>
);
};
export default SomeAwesomeComponent;
Subscribe ⬅️
useCrestronSubscribeAnalog
import { useCrestronSubscribeAnalog } from "@norgate-av/react-crestron-ch5-hooks";
export const SomeAwesomeComponent = () => {
const [state] = useCrestronSubscribeAnalog("some-analog-join-or-name");
return (
<div>
<h1>Analog State</h1>
<h2>Value: {state.value}</h2>
</div>
);
};
export default SomeAwesomeComponent;useCrestronSubscribeDigital
import { useCrestronSubscribeDigital } from "@norgate-av/react-crestron-ch5-hooks";
export const SomeAwesomeComponent = () => {
const [state] = useCrestronSubscribeDigital("some-digital-join-or-name");
return (
<div>
<h1>Digital State</h1>
<h2>Value: {state.value ? "True" : "False"}</h2>
</div>
);
};
export default SomeAwesomeComponent;useCrestronSubscribeSerial
import { useCrestronSubscribeSerial } from "@norgate-av/react-crestron-ch5-hooks";
export const SomeAwesomeComponent = () => {
const [state] = useCrestronSubscribeSerial("some-serial-join-or-name");
return (
<div>
<h1>Serial State</h1>
<h2>Value: {state.value}</h2>
</div>
);
};
export default SomeAwesomeComponent;useCrestronSubscribeAnalogCollection
import { useCrestronSubscribeAnalogCollection } from "@norgate-av/react-crestron-ch5-hooks";
export const SomeAwesomeComponent = () => {
const [state1, state2, state3] = useCrestronSubscribeAnalogCollection([
"some-analog-join-or-name",
"2",
"3",
]);
return (
<div>
<h1>Analog State Collection</h1>
<h2>Value 1: {state1.value}</h2>
<h2>Value 2: {state2.value}</h2>
<h2>Value 3: {state3.value}</h2>
</div>
);
};
export default SomeAwesomeComponent;useCrestronSubscribeDigitalCollection
import { useCrestronSubscribeDigitalCollection } from "@norgate-av/react-crestron-ch5-hooks";
export const SomeAwesomeComponent = () => {
const [state1, state2, state3] = useCrestronSubscribeDigitalCollection([
"some-digital-join-or-name",
"2",
"3",
]);
return (
<div>
<h1>Digital State Collection</h1>
<h2>Value 1: {state1.value ? "True" : "False"}</h2>
<h2>Value 2: {state2.value ? "True" : "False"}</h2>
<h2>Value 3: {state3.value ? "True" : "False"}</h2>
</div>
);
};
export default SomeAwesomeComponent;useCrestronSubscribeSerialCollection
import { useCrestronSubscribeSerialCollection } from "@norgate-av/react-crestron-ch5-hooks";
export const SomeAwesomeComponent = () => {
const [state1, state2, state3] = useCrestronSubscribeSerialCollection([
"some-serial-join-or-name",
"2",
"3",
]);
return (
<div>
<h1>Serial State Collection</h1>
<h2>Value 1: {state1.value}</h2>
<h2>Value 2: {state2.value}</h2>
<h2>Value 3: {state3.value}</h2>
</div>
);
};
export default SomeAwesomeComponent;
Publish & Subscribe ↔️
useCrestronAnalog
import { useCrestronAnalog } from "@norgate-av/react-crestron-ch5-hooks";
export const SomeAwesomeComponent = () => {
const [signal] = useCrestronAnalog("some-analog-join-or-name");
return (
<div>
<h1>Analog Signal</h1>
<h2>Value: {signal.state.value}</h2>
<button onClick={() => signal.action.setValue(666)}>
Set Value
</button>
</div>
);
};
export default SomeAwesomeComponent;useCrestronDigital
import { useCrestronDigital } from "@norgate-av/react-crestron-ch5-hooks";
export const SomeAwesomeComponent = () => {
const [signal] = useCrestronDigital("some-digital-join-or-name");
return (
<div>
<h1>Digital Signal</h1>
<h2>Value: {signal.state.value ? "True" : "False"}</h2>
<button
onTouchStart={() => signal.action.setValue(true)}
onTouchEnd={() => signal.action.setValue(false)}
>
Set Value
</button>
<button
onTouchStart={() => signal.action.push()}
onTouchEnd={() => signal.action.release()}
>
Push/Release
</button>
<button onClick={() => signal.action.click()}>Click</button>
</div>
);
};
export default SomeAwesomeComponent;useCrestronSerial
import { useCrestronSerial } from "@norgate-av/react-crestron-ch5-hooks";
export const SomeAwesomeComponent = () => {
const [signal] = useCrestronSerial("some-serial-join-or-name");
return (
<div>
<h1>Serial Signal</h1>
<h2>Value: {signal.state.value}</h2>
<button onClick={() => signal.action.setValue("cowbell")}>
Set Value
</button>
</div>
);
};
export default SomeAwesomeComponent;useCrestronAnalogCollection
import { useCrestronAnalogCollection } from "@norgate-av/react-crestron-ch5-hooks";
export const SomeAwesomeComponent = () => {
const [signal1, signal2, signal3] = useCrestronAnalogCollection([
"some-analog-join-or-name",
"2",
"3",
]);
return (
<div>
<h1>Analog Signal Collection</h1>
<h2>Value 1: {signal1.state.value}</h2>
<h2>Value 2: {signal2.state.value}</h2>
<h2>Value 3: {signal3.state.value}</h2>
<button onClick={() => signal1.action.setValue(666)}>
Set Value 1
</button>
<button onClick={() => signal2.action.setValue(666)}>
Set Value 2
</button>
<button onClick={() => signal3.action.setValue(666)}>
Set Value 3
</button>
</div>
);
};
export default SomeAwesomeComponent;useCrestronDigitalCollection
import { useCrestronDigitalCollection } from "@norgate-av/react-crestron-ch5-hooks";
export const SomeAwesomeComponent = () => {
const [signal1, signal2, signal3] = useCrestronDigitalCollection([
"some-digital-join-or-name",
"2",
"3",
]);
return (
<div>
<h1>Digital Signal Collection</h1>
<h2>Value 1: {signal1.state.value ? "True" : "False"}</h2>
<h2>Value 2: {signal2.state.value ? "True" : "False"}</h2>
<h2>Value 3: {signal3.state.value ? "True" : "False"}</h2>
<button
onTouchStart={() => signal1.action.setValue(true)}
onTouchEnd={() => signal1.action.setValue(false)}
>
Set Value 1
</button>
<button
onTouchStart={() => signal1.action.push()}
onTouchEnd={() => signal1.action.release()}
>
Push/Release 1
</button>
<button onClick={() => signal1.action.click()}>Click 1</button>
<button
onTouchStart={() => signal2.action.setValue(true)}
onTouchEnd={() => signal2.action.setValue(false)}
>
Set Value 2
</button>
<button
onTouchStart={() => signal2.action.push()}
onTouchEnd={() => signal2.action.release()}
>
Push/Release 2
</button>
<button onClick={() => signal2.action.click()}>Click 2</button>
<button
onTouchStart={() => signal3.action.setValue(true)}
onTouchEnd={() => signal3.action.setValue(false)}
>
Set Value 3
</button>
<button
onTouchStart={() => signal3.action.push()}
onTouchEnd={() => signal3.action.release()}
>
Push/Release 3
</button>
<button onClick={() => signal3.action.click()}>Click 3</button>
</div>
);
};
export default SomeAwesomeComponent;useCrestronSerialCollection
import { useCrestronSerialCollection } from "@norgate-av/react-crestron-ch5-hooks";
export const SomeAwesomeComponent = () => {
const [signal1, signal2, signal3] = useCrestronSerialCollection([
"some-serial-join-or-name",
"2",
"3",
]);
return (
<div>
<h1>Serial Signal Collection</h1>
<h2>Value 1: {signal1.state.value}</h2>
<h2>Value 2: {signal2.state.value}</h2>
<h2>Value 3: {signal3.state.value}</h2>
<button onClick={() => action1.setValue("cowbell")}>
Set Value 1
</button>
<button onClick={() => action2.setValue("cowbell")}>
Set Value 2
</button>
<button
onClick={() =>
action3.setValue("That's enough cowbell for now!")
}
>
Set Value 3
</button>
</div>
);
};
export default SomeAwesomeComponent;
Optional Subscribe Callback ☎️
All hooks that subscribe to state can be passed an optional callback to be called when the state changes.
import { useCrestronSubscribeAnalogCollection } from "@norgate-av/react-crestron-ch5-hooks";
export const SomeAwesomeComponent = () => {
const [state1, state2, state3] = useCrestronSubscribeAnalogCollection(
["some-analog-join-or-name", "2", "3"],
(value, signalName) => {
console.log(`Signal: ${signalName}, New Value: ${value}`);
},
);
return (
<div>
<h1>Analog State Collection</h1>
<h2>Value 1: {state1.value}</h2>
<h2>Value 2: {state2.value}</h2>
<h2>Value 3: {state3.value}</h2>
</div>
);
};
export default SomeAwesomeComponent;The signalName parameter on the callback is also optional and can be omitted if you only have one signal.
import { useCrestronSubscribeAnalog } from "@norgate-av/react-crestron-ch5-hooks";
export const SomeAwesomeComponent = () => {
const [state] = useCrestronSubscribeAnalog(
"some-analog-join-or-name",
(value) => {
console.log(`New Value: ${value}`);
},
);
return (
<div>
<h1>Analog State</h1>
<h2>Value: {state.value}</h2>
</div>
);
};
export default SomeAwesomeComponent;
Types ⌨️
Aliases
Analog
export declare type Analog = number;Digital
export declare type Digital = boolean;Serial
export declare type Serial = string;Event Actions
IBaseEventAction
export declare interface IBaseEventAction<T> {
setValue: (value: T) => void;
}IAnalogEventAction
export declare interface IAnalogEventAction extends IBaseEventAction<Analog> {}IDigitalEventAction
export declare interface IDigitalEventAction extends IBaseEventAction<Digital> {
push: () => void;
release: () => void;
click: () => void;
}ISerialEventAction
export declare interface ISerialEventAction extends IBaseEventAction<Serial> {}State
IBaseState
export declare interface IBaseState<T> {
value: T;
}IAnalogState
export declare interface IAnalogState extends IBaseState<Analog> {}IDigitalState
export declare interface IDigitalState extends IBaseState<Digital> {}ISerialState
export declare interface ISerialState extends IBaseState<Serial> {}IStateSubscription
export declare interface IStateSubscription {
id: string;
signalName: string;
}StateCallback
export declare type StateCallback<T> = (value: T, signalName?: string) => void;AnalogStateCallback
export declare type AnalogStateCallback = StateCallback<Analog>;DigitalStateCallback
export declare type DigitalStateCallback = StateCallback<Digital>;SerialStateCallback
export declare type SerialStateCallback = StateCallback<Serial>;Signals
IBaseSignal
export declare interface IBaseSignal<TState, TAction> {
state: TState;
action: TAction;
}IAnalogSignal
export declare interface IAnalogSignal
extends IBaseSignal<IAnalogState, IAnalogEventAction> {}IDigitalSignal
export declare interface IDigitalSignal
extends IBaseSignal<IDigitalState, IDigitalEventAction> {}ISerialSignal
export declare interface ISerialSignal
extends IBaseSignal<ISerialState, ISerialEventAction> {}
Team ⚽
This project is maintained by the following person(s) and a bunch of awesome contributors.
 Damien Butt |
Contributors ✨
Thanks go to these awesome people (emoji key):
 Dependabot |
This project follows the all-contributors specification. Contributions of any kind are welcome!