Boilerplate to get started building React-based interfaces for Crestron using CH5

Overview

Getting Started with Crestron UI

This project was bootstrapped with Create React App.

Example component communicating with the Crestron-CH5 library:

import {useDigitalState, usePublishDigital} from 'hooks';

export default function ProjectorControls(_props: Props): MixedElement {
  const screenDownState = useDigitalState('23');
  const screenUpState = useDigitalState('24');

  const handleDownStateClick = usePublishDigital('23', 1000);
  const handleUpStateClick = usePublishDigital('24', 1000);

  return (
    <ButtonWrapper>
      <Button
        label="Open"
        isDisabled={screenUpState}
        onClick={handleDownStateClick}
      />
      <Button
        label="Retract"
        isDisabled={screenDownState}
        onClick={handleUpStateClick}
      />
    </ButtonWrapper>
  );
}

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn flow

Runs Flow type checker.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

If it fails, check @crcomlib config at @crestron/ch5-crcomlib/node_modules/package.json and ensure that "types" and "main" are set to:

"types": "build_bundles/cjs/@types/index.d.ts", "main": "build_bundles/cjs/cr-com-lib.js",

yarn build:archive

Creates the ch5 binary. Run this command only after you have run yarn build.

yarn eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

You might also like...

A Minimal Setup & Fast Boilerplate for React.js with Vite.

A Minimal Setup & Fast Boilerplate for React.js with Vite.

A Minimal Setup & Fast Boilerplate for React.js with Vite Features 🚀 Dynamic Pages Routing with react-router-dom from React.js 🚀 Fast development wi

Oct 25, 2022

Boilerplate for Truffle, Web3.js, React, Redux Toolkit

Truffle, React, Redux Toolkit, Web3.js boilerplate What it's for Currently, it's a nightmare and takes forever trying to get React working with Truffl

Jun 9, 2022

boilerplate for react-firebase app

Goal of the project Everytime there is an idea about web app side project, significant amount time is spent on building boilerplate code. Especially g

Dec 8, 2022

React/Express/Webpack Boilerplate

React Boilerplate The following repo contains a very basic setup git clone https://github.com/asieke/React-Express-Boilerplate.git cd React-Express-Bo

Dec 30, 2022

A boilerplate for kickstarting my projects with Django backend and React front-end

Django-React-Boilerplate This is a boilerplate for kickstarting my projects with Django backend and React front-end. (AND, PostgreSQL) as the database

Apr 14, 2022

This project is a React Native Boilerplate that can be used to kickstart a mobile app.

Meta Point People: Mounir Dhahri This is an Artsy OSS project. Don't know what Artsy is? Check out this overview and more, or read our objc.io on team

Jul 6, 2022

⚛️ Hooks for building fast and extendable tables and datagrids for React

⚛️ Hooks for building fast and extendable tables and datagrids for React

Hooks for building lightweight, fast and extendable datagrids for React Enjoy this library? Try them all! React Query, React Form, React Charts Visit

Jan 3, 2023

A collection of composable React components for building interactive data visualizations

A collection of composable React components for building interactive data visualizations

an ecosystem of composable React components for building interactive data visualizations. Victory Contents Getting Started Victory Native API Document

Jan 3, 2023

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

Module SonarCloud Status ag-grid-community ag-grid-enterprise AG Grid AG Grid is a fully-featured and highly customizable JavaScript data grid. It del

Dec 30, 2022
Releases(v0.1.0)
Owner
Mukund Salia
Mukund Salia
Chrome-extension-react-boilerplate - Simple Chrome extension React boilerplate.

Simple Chrome extension React boilerplate This is a simple chrome extension boilerplate made in React to use as a default structure for your future pr

Younes 6 May 25, 2022
A declarative, efficient, and flexible JavaScript library for building user interfaces.

React · React is a JavaScript library for building user interfaces. Declarative: React makes it painless to create interactive UIs. Design simple view

Facebook 200.2k Jan 8, 2023
A small component based app library composing user interfaces and apps.

See https://vibejs.com for ongoing documentation and info. VibeJS A small component based JavaScript library to build user interfaces and apps. If you

Bret 20 Nov 16, 2022
React-app - Building volume rendering web app with VTK.js,react & HTML Using datasets provided in vtk examples (head for surface rendering and chest for ray casting)

SBE306 Assignment 4 (VTK) data : Directory containing Head and Ankle datasets Description A 3D medical viewer built with vtk-js Team Team Name : team-

Mustafa Megahed  2 Jul 19, 2022
React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync)

React Starter Kit — "isomorphic" web app boilerplate React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Expr

Kriasoft 21.7k Dec 30, 2022
Finished code and notes from EFA bonus class on building a React project without create-react-app

React From Scratch Completed Code This is the completed code for the EFA bonus class on building a React project from scratch. Included are also markd

Conor Broaders 3 Oct 11, 2021
A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router.

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router. It also includes a theme switcher from light to dark mode.

Franklin Okolie 4 Jun 5, 2022
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

marmelab 21.2k Dec 30, 2022
React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in

A comprehensive starter kit for rapid application development using React. Why Slingshot? One command to get started - Type npm start to start develop

Cory House 9.8k Dec 22, 2022
Boilerplate to build Cross-Platform Apps with Expo and React Native

Expo and React Native Boilerplate Boilerplate to build Cross-Platform Apps with Expo and React Native What are you going to find in this boilerplate E

José Ferrer 26 Apr 29, 2022