React Crestron CH5 Hooks ⚓

---

---

A collection of React custom hooks ⚓ for Crestron CH5 project development.

Contents 📖

• Features 📦
• Installation ⚡
• Usage 🚀
  • Publish ➡️
    • useCrestronPublishAnalog
    • useCrestronPublishDigital
    • useCrestronPublishSerial
    • useCrestronPublishAnalogCollection
    • useCrestronPublishDigitalCollection
    • useCrestronPublishSerialCollection
  • Subscribe ⬅️
    • useCrestronSubscribeAnalog
    • useCrestronSubscribeDigital
    • useCrestronSubscribeSerial
    • useCrestronSubscribeAnalogCollection
    • useCrestronSubscribeDigitalCollection
    • useCrestronSubscribeSerialCollection
  • Publish & Subscribe ↔️
    • useCrestronAnalog
    • useCrestronDigital
    • useCrestronSerial
    • useCrestronAnalogCollection
    • useCrestronDigitalCollection
    • useCrestronSerialCollection
  • Optional Subscribe Callback ☎️
• Types ⌨️
  • Aliases
    • Analog
    • Digital
    • Serial
  • Event Actions
    • IBaseEventAction
    • IAnalogEventAction
    • IDigitalEventAction
    • ISerialEventAction
  • State
    • IBaseState
    • IAnalogState
    • IDigitalState
    • ISerialState
    • IStateSubscription
    • StateCallback
    • AnalogStateCallback
    • DigitalStateCallback
    • SerialStateCallback
  • Signals
    • IBaseSignal
    • IAnalogSignal
    • IDigitalSignal
    • ISerialSignal
• Team ⚽
• Contributors ✨
• LICENSE ⚖️

Features 📦

✅ Collection of 18 hooks

✅ CommonJS, UMD and ESM Support

✅ Built-in Type definitions for TypeScript

Installation ⚡

npm install @norgate-av/react-crestron-ch5-hooks

# or

yarn add @norgate-av/react-crestron-ch5-hooks

# or

pnpm 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!

LICENSE ⚖️

MIT