Home

Awesome

React DMX

Render React components to DMX light systems.

The problem

Controlling a handful of lights with DMX is pretty simple and straightforward. However, adding multiple lights or lights with multiple channels (RGB/WA+UV) makes things much more complicated.

This solution

React DMX lets you use React components and a special renderer to compose your lighting system just like you would a web app. With a simple <light> primitive, you can compose any kind of lighting system imaginable! And, since it's React, you have access to component lifecycle events, state, and reactive updates.

Installation

This module is distributed via npm. It is designed to run only on Node systems, not browsers.

npm install --save react-dmx

React DMX uses node-dmx to send DMX commands to DMX controllers. You must manually install the drivers which node-dmx uses to send these commands. The node-ftdi is recommended.

Since React DMX is intended to be used with JSX, it is recomended you install Babel and the React babel preset as well:

npm install --save-dev babel-cli babel-preset-env babel-preset-react

Babel's website has more in-depth installation instructions.

Usage

Currently, all React DMX instances must use a Universe as the root element. The following will set channel 0 to the maximum level (255):

const React = require('react');
const renderer = require('react-dmx');

render(
  <universe
  name="my-universe"
  mode="enttec-usb-dmx-pro"
  port="/dev/cu.usbserial-A7ABR43S">
  <light channel={0} intensity={1} />>
  </universe>
)

API

<universe>

Props:

<light>

Props:

DMX Modes

LICENSE

MIT